SZX的开发笔记

使用 vite 创建 vue3 项目通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。 1234$ npm init vite-app <project-name>$ cd <project-name>$ npm install$ npm run dev 或者 yarn： 1234$ yarn create vite-app <project-name>$ cd <project-name>$ yarn$ yarn dev vue3.0入门 setup() 函数,接收两个参数，分别是 props，context,该函数是页面的入口函数，返回页面中用到的响应式数据 ref 用来声明一个响应式的普通值类型。包含：string、number、Boolean、null、undefined等 1234567import {ref} from "vue";setup(){ const msg = ref("hello world") return ...

vue 中的潜规则 以 \_ 开头的数据表示私有属性，不能被访问 以 $ 开头的数据表示只读数据 proxy 数据代理相当于用 this.name 访问 this.\_data.name 例如： 12345678910var o1 = { name: "张三" };// 要有一个对象 o2 ,要使用 o2.name 访问 o1.nameObject.defineProperty("o2", "name", { get() { return o1.name; },});// 这样代理后，访问 `o2.name` 就相当于访问 `o1.name` 发布订阅模式目的：解耦，让各个模块之间没有紧密的联系。 在 vue 中，整个更新是按照组件的单位进行判断，以节点为单位进行更新。 如果代码中没有自定义组件，则在比较算法的时候，会将全部的模板对应的虚拟 dom 进行比较 如果代码中含有自定义组件，则在比较算法的时候，会判断是那一个组件进行了更新，只会判断更新数据的 ...

正则表达式正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。 感受正则的魅力123456789101112let title = "现在是2020年11月10日13点15分";// 普通方式拿到上面一段文字中的数字let time = [...title].filter((item) => !Number.isNaN(Number.parseInt(item)));// 拿到数字console.log(time.join(""));// 使用正则获取数字,正则比上面的要简洁的多let numbs = title.match(/\d/g);console.log(numbs.join(""));// 打印结果完全相同console.log(time.join("") === numbs.join("")); //true 匹配模式 g 全局匹配 ...

Git 是什么？ Git 是目前世界上最先进的分布式版本控制系统（没有之一）。 Git 有什么特点？简单来说就是：高端大气上档次！ git 安装首先进入 Git 官网直接下载安装程序，然后按默认选项安装即可。安装完成后，在开始菜单里找到“Git”->“Git Bash”，蹦出一个类似命令行窗口的东西，就说明 Git 安装成功！ 安装完成后，还需要最后一步设置，在命令行输入： 12$ git config --global user.name "Your Name"$ git config --global user.email "email@example.com" 因为 Git 是分布式版本控制系统，所以，每个机器都必须自报家门：你的名字和 Email 地址。你也许会担心，如果有人故意冒充别人怎么办？这个不必担心，首先我们相信大家都是善良无知的群众，其次，真的有冒充的也是有办法可查的。 注意 git config 命令的–global 参数，用了这个参数，表示你这台机器上所有的 Git 仓库都会使用这个配置，当然也可以对某个仓库 ...

模块就是把多个功能分隔成独立的文件，一个模块负责一部分功能，减低代码耦合度 模块可以给不同的文件划分独立作用域，多个文件中重名的变量不会相互影响 模块可以开放部分功能给外部 模块的基本使用在 js 中使用 export 导出想要导出的内容 导出方法： 12345678let title = "title";let url = "url";function show() { console.log("show");}// 导出export { title, url, show }; 导入方法 12345// 通过import引入import { title, url, show } from "./js/2.js";console.log(title); // titleconsole.log(url); // urlshow(); // show 模块延迟解析和严格模式在代码中使用导入时要在 script 标签上声明 ty ...

在 ES6 规范中，引入了 class 的概念。使得 JS 开发者终于告别了，直接使用原型对象模仿面向对象中的类和类继承时代。 但是 JS 中并没有一个真正的 class 原始类型， class 仅仅只是对原型对象运用语法糖。所以，只有理解如何使用原型对象实现类和类继承，才能真正地用好 class。 通过类来创建对象，使得开发者不必写重复的代码，以达到代码复用的目的。它基于的逻辑是，两个或多个对象的结构功能类似，可以抽象出一个模板，依照模板复制出多个相似的对象。就像自行车制造商一遍一遍地复用相同的蓝图来制造大量的自行车。 class 声明类的语法1234567891011121314// 声明类class User { // 类中自执行函数，可以用来传参 constructor(title) { this.title = title; } // 声明多个方法时不需要添加逗号 getTitle(name) { return name + this.title; }}console.log(typeof ...

原型初步认识123456789101112131415161718let arr = ["lisi"];// 打印出arr数组// 通过控制台发现它有__proto__属性，吧这个属性称之为它的原型// 点开原型后发现原型里面还有__proto__原型，一共是三级的关系// 我们吧这三级称之为原型链console.log(arr);let obj = {};// 打印对象看他的原型发现只有一级__proto__// 因此对象和数组的原型不一样console.log(obj);let obj2 = {};// Object.getPrototypeOf(obj) 此方法可以获取到元素的原型console.log(Object.getPrototypeOf(obj));// trueconsole.log(Object.getPrototypeOf(obj2) === Object.getPrototypeOf(obj)); // true 没有原型的对象也是存在的123456789101112131415let div = d ...

什么是面向对象 面向对象不是新的东西，它只是过程式代码的一种高度封装，目的在于提高代码的开发效率和可维护性。 面向对象的特性 封装性 继承性 多态性 函数编程与面向对象对比12345678910111213141516171819202122232425262728293031323334353637383940// 例子：求出李四的成绩的平均数// 方式一：函数编程let name = "李四";let grade = [ { name: "js", score: 99, }, { name: "css", score: 69, },];function average(name, grade) { let count = grade.reduce((o, l) => o + l.score, 0); return `${name}的平均分是${count / grade.length} ...

闭包和作用域 闭包就是能够读取其他函数部变量的函数。由于在 Javascript 语言中，只有函数内部的子函数才能读取局部变量，容因此可以把闭包简单理解成”定义在一个函数内部的函数”。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。 作用域被分为 全局作用域、函数作用域、块级作用域，全局作用域定义的变量全局可以访问，函数作用域只有在函数内部可以使用，块级作用域用大括号包起来的范围被称为块级作用域，每个作用域可以访问自己父级作用域的函数或者变量，而父级作用域不能访问自己子级作用域的变量和函数。 环境和作用域 环境：代码运行所依赖的东西称之为环境 环境存在的价值：被需要才会体现出价值 作用域：全局作用域只有一个，每个函数都有自己的作用域 1：编译器运行时会将变量定义在所在的作用域 2：使用变量时会从当前作用域查找变量，没有时会层层网上找 3：作用域就像攀亲戚，晚辈可以向长辈要东西，但是长辈不能向晚辈要东西 下面代码中 show 方法被定义在全局作用域中，因而在外部可以使用 show(),但是 show2 方法被定义在 show 方法内部，所以在 show 方法中 ...

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 函数声明的多种方式123456789101112131415161718192021222324// 字面量方式声明函数function logtitle(title) { console.log(title);}logtitle("6666");// 表达式声明函数,结尾要加分号，不加分号在打包是可能会出错let logmsg = function(msg) { console.log(msg);};logmsg("888");// 对象中使用函数let obj = { name: null, setUserName(name) { this.name = name; }, getUserName() { return this.name; },};obj.setUserName("lisi");console.log(obj.getU ...