# vue-cli

**Repository Path**: zhang-yuqing1101/vue-cli

## Basic Information

- **Project Name**: vue-cli
- **Description**: vue-cli脚手架相关
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-12-26
- **Last Updated**: 2023-01-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue2 课堂笔记

## 每日彩蛋

1. 说明 `a = b = c = d = 1;`的执行过程

- 查阅 MDN 的运算符优先级文档，找到赋值(=)运算符，发现多个=在一个表达式中是从右向左执行的
- `c=d=1`是先执行`d=1`,然后把`d=1`的返回值赋值给 c
- 赋值(=)操作符的返回值:返回=右侧的值,所以`d=1`返回 1,然后把 1 再赋值给 c
- 后边依次类推

2. `for(var i = 0,j = 0; i < 5, j < 10; i++,j++){语句}` 请问当前 for 循环的循环次数??为什么

- 首先直到 for 循环是否能够向下继续循环,只要看 for 中的判断式
- 判断式是多个,由逗号运算符间隔开,我们就要考虑逗号运算符的返回值
- 逗号运算符如果出现多个,则从左向右执行,并返回逗号右侧的值
- 所以当前的循环主要看 j 的次数来决定整个循环的次数

3. 代码题:请得到 7 天以后的现在的时间

- 方式 1
  ```js
  //1. 获取当前的时间
  new Date();
  //2. 获取当前时间的日期
  new Date().getDate();
  //3. 获取目标时间的日期
  new Date().getDate() + 7;
  //4. 获取当前的时间,把日期修改为目标日期
  new Date().setDate(new Date().getDate() + 7);
  ```
- 方式 2
  ```js
  //1. 得到7天以后的时间戳
  Date.now() + 1000 * 60 * 60 * 24 * 7;
  //2.创建一个时间,把7天以后的时间戳交给参数
  new Date(Date.now() + 1000 * 60 * 60 * 24 * 7);
  ```

4. 代码题:'abaabgfdebbafefgefsrsbabesseeeeaa' 请计算每一个字母出现的次数,及出现最多次数的字母

```js
const str = "abaabgfdebbaefefgfsrsbabesseeeeaa";

//1.创建一个对象,用来保存每一个字符出现的次数
const obj = {};

//2. 遍历字符串的每一个字符,然后去对象中判断,如果对象中不存在,则给对象新增一个属性默认值为1,如果对象存在,则把对象的值+1
for (let key of str) {
  obj[key] ? obj[key]++ : (obj[key] = 1);
}
console.log(obj);

//3. 先初始化一个值用来保存出现最多的key,再初始化一个值用来保存出现最多key的次数
let bigStr = "";
let bigStrNum = 0;

//4. 遍历对象,一个的判断
for (let key in obj) {
  //如果当前遍历出的新值的次数 大于目前保存的次数,那你牛逼,我们跟你
  if (obj[key] > bigStrNum) {
    bigStr = key;
    bigStrNum = obj[key];
  }
}

console.log(bigStr, bigStrNum);
```

5. 让一个字符串的首字母大写,比如 "hello every one"--->"Hello every one"
6. 让一个字符串所有单词的首字母大写,比如"hello every one"--->"Hello Every One"
7. 数组去重的方法(3 种)
8. 封装一个 myNew 函数实现 new 操作符,如下,让 p1 和 p2 有一样的效果

```js
function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.do = function () {};

//原始new
const p1 = new Person("xiaowang", 18);
//手动封装new
const p2 = myNew(Person, "xiaowang", 18);
```

9. 让一个不定宽高的元素在容器中水平垂直居中的方式(3 种方式)
10. 给按钮绑定点击事件,频繁点击按钮时让事件最少间隔 1s 才能触发一次(节流),并且封装通用函数
11. 什么是事件流(事件机制)

- 事件冒泡:事件从最精确的元素(target)开始向最不精确的元素(document)依次传播
- 事件捕获:事件从最不精确的元素(document)开始向最精确的元素(target)依次传播
- W3C 事件流:
  当事件触发,先执行捕获过程
  再执行目标元素的事件(target)
  在执行冒泡过程

12. 在输入框输入内容后,等待 1s 后发送请求,如果 1s 内输入框内容改变了,则重新等待 1s(防抖)
13. 我们要拷贝一个对象(深拷贝和浅拷贝)的做法
14. 整理 HTML5 新特性有哪些

- 语义性标签,header\footer\nav\aticle\section
- 增强表单,input 的多种 type 类型(tel\month\email\number\color.....)
- 音频视频
- WebWorker:开启多线程
- WebStorage:本地存储
- WebSocket:是一种通信协议
- Canvas:画布

15. 整理 CSS3 新特性有哪些

- 选择器
- 边框,阴影,背景,渐变
- 变形
- 过渡动画
- 关键帧动画
- flex
- @media 媒体查询

16. 整理 ES6 新特性有哪些

- let 和 const
- 解构赋值
- 新增数据类型(symbol,bigint)
- 新增的数据结构(map,set)
- iterator 接口(for..of..,解构,扩展运算符原理)
- promise/async/await
- class 类
- es6 模块化
- 新增的对象字符串等方法

17. 用 css 画一个三角形
18. 描述 undefined 和 null 的区别？？？？？

- null 代表空,undefined 代表的是找不到
- undefined 出现的场景
  - 声明一个变量没有赋值,则变量值是 undefined
  - 获取一个对象没有的属性时,则值是 undefined
  - 函数没有 return 值,则函数的返回值就是 undefined
  - 函数的形参没有被赋值,则这个形参的值是 undefined
- null 出现的场景
  - 原型链的终点是 null(防止原型链死循环)
  - 声明变量此时不想赋值,可以先赋值为 null
  - 调用函数传参占位
  - 把一个对象的引用移除,把这个对象变成垃圾对象

19. 已知一个网页地址`http://www.baidu.com?a=1&b=2&c=3`,请封装一个方法提炼出这个地址中的参数,并以对象形式返回{a:1,b:2,c:3}
20. 封装一个扁平化数组的函数(flat),[1,[2,[3,4],5],6]====>[1,2,3,4,5,6]
21. 封装一个函数,求数组的交集,[1,2,3,4],[2,3,5,6]===>[2,3]
22. 封装一个函数,接收一个数字作为参数,检查它是不是 4 的次方数,如果是则返回 true,否则返回 false(进阶:不使用递归)
23. 后台给了一组数据,但是这组数据不是我们想要的

```js
  const obj = [
    {id:3,parent:2},
    {id:1,parent:null},
    {id:2,parent:1}
    {id:4,parent:1}
  ]
```

把这个数据转为我们需要的格式

```js
const result = {
  id: 1,
  parent: null,
  children: [
    {
      id: 2,
      parent: 1,
      children: [
        {
          id: 3,
          parent: 2,
        },
      ],
    },
    {
      id: 4,
      parent: 1,
    },
  ],
};
```

## 复习--git

- 01.git 操作复习

  1. 初始化本地仓库(`git init`)
  2. 本地仓库提交(`git add . `, `git commit -m 'init/add/fixed/docs:xxxxxx'`)
  3. 新建远程仓库,拿到远程仓库的 ssh 地址
  4. 把本地仓库和远程仓库关联(`git remote add origin xxxxxxxxx`)
  5. 把本地仓库向远程仓库提交(第一次:`git push -u origin master`,第二次:`git push`)
  6. 去到当前仓库中的管理页面,把当前项目设置为开源
  7. 拉取其他人代码(`git clone xxxx`||`git pull`)
  8. 撤销工作区的改动(`git restore .`)
  9. 取消远程仓库的关联(`git remote remove origin`)

- 02.免密登录的配置
  1. 配置本地 git 用户名和 gitee 的用户名一致:`git config --global user.name "username"`
  2. 配置本地 git 邮箱和 gitee 的邮箱一致:`git config --global user.email "email"`
  3. 在任意命令行位置书写`ssh-keygen`,生成秘钥,拿到公钥的地址
  4. 用记事本打开公钥文件,复制里边内容
  5. 去 gitee 的公钥配置中,添加公钥,即可使用 ssh 免密操作

## Vue 学习需要使用的插件

- vscode 的 vue2 插件:

  - Vetur -- Pine Wu
  - Vue 3 Snippets----hollowtree
  - vue-helper --- shenjiaolong

- 其他插件:
  - vscode-icons 文件列表图标插件
  - Prettier - Code formatter 格式化插件

## Vue 基础概念

1. MVVM 模型

- MVVM(Model-View-ViewModel)是一种软件架构设计模式
- MVVM 分为三个部分：分别是 M（Model，模型层 ），V（View，视图层），VM（ViewModel，视图数据层,V 与 M 连接的桥梁，也可以看作为控制器）
  - M：模型层，值得是数据模型,主要负责业务数据相关；
  - V：视图层，顾名思义，负责视图相关，细分下来就是 html+css 层,为了更方便的展示 Model 层的数据；
  - VM：V 与 M 沟通的桥梁，负责监听 M 或者 V 的修改，是实现 MVVM 双向绑定的要点
- ViewModel 是 Vue.js 的核心，它是一个 Vue 实例,MVVM 支持双向绑定，意思就是当 M 层数据进行修改时，VM 层会监测到变化，并且通知 V 层进行相应的修改，反之修改 V 层则会通知 M 层数据进行修改

2. new Vue(options)中基础配置项

- el:配置项,代表当前 vue 实例要挂载的容器,可以是一个选择器的字符串,也可以是已经获取的 DOM 元素
- template:配置项,一个字符串模板。模板将会替换容器
- data:Vue 实例的数据对象

3. $mount 挂载

- 如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。
- 可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
- 接受的参数可以是选择器 string,也可以是一个获取的 DOM 元素,作为容器
- 我们可以使用$mount 进行异步挂载

4. 模板的语法糖写法

- 容器内部也可以进行书写模板,切记不是 DOM,而是模板
- 在 vue 实例化过程中,如果选项中存在 template 选项,则把 template 选项的内容作为模板替换容器
- 如果选项中不存在 template,则把容器的 outerHTML 作为模板

5. data 配置项详解

- data 可以是一个对象,是 Vue 实例的数据对象
- data 的数据会在实例对象 vm 上作为属性存放起来
- data 也可以是一个函数,返回一个对象,对象中存放当前实例需要的数据,并且建议是一个函数
- 为什么组件内的 data 要书写为一个函数???? 01. 当一个组件被定义，data 必须声明为返回一个初始数据对象的函数 02. 因为组件可能被用来创建多个实例(组件可能被复用)。 03. 如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！则数据就会互相影响 04. 通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

6.  插值语法注意事项:

- 插值语法中的变量都是从当前的 vm 对象上去寻找的
- 插值语法中可以书写任意表达式(由一个或者多个变量或值 配合 0 个或多个运算符组成的 被称作为表达式,表达式都会有返回值),不能书写语句
- 插值的变量可以是任意类型的,按照一定的规则转为字符串展示(Symbol 除外)

## 指令系统

### 01. 什么是指令

- 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (插值语法区域)。
- 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

### v-bind

1. v-bind 的基础使用

- 模板中的属性值默认都是字符串格式的！！！
- 如果希望属性值的区域是一个插值语法区域，我们就可以使用 v-bind 指令
- v-bind:强制绑定(动态绑定)：把一个模板中属性的值区域变成插值语法区域，在插值语法区域中可以执行表达式，也可以去实例上拿值
- v-bind 可以直接简写为 `:`
- 在 v-bind 中我们经常的去拼接一些值，方法如下 01. `<img :src="baseUrl+'01.jpg'" alt="" />` 02. `<img :src="`${baseUrl}02.jpg`" alt="" />`

2. v-bind 动态类的设置

- 什么时候使用动态类？当类名是通过数据来控制是否添加的时候，才会使用动态类
- 情况 1-字符串：当动态类只有一个类的时候，我们可以直接使用三元等表达式，返回一个字符串即可
- 情况 2-对象：当动态类的类有一个或者多个的时候(固定个数)，我们可以给动态类设置一个对象，每一个类名都是对象的 key，值是一个布尔值代表是否开启当前的类
- 情况 3-数组：当动态类的类有一个或多个，不确定数量的时候，可以使用数组，只要在数组中的类都会添加到 DOM 上，不能开启和关闭，但是可以操作数组来控制类

3. v-bind 动态 style 的设置

- v-bind 可以使用动态的 style 控制元素的样式
- 动态的 style 可以接受一个对象,对象的 key 就是 style 的属性,对象的值就是 style 的值,对象的值可以使用插值来进行实现
- 动态类 style 可以接受一个数组,数组中可以包含多个动态类对象

4. 批量强制绑定

- 很多时候我们需要把对象中的属性一个个的绑定在元素或者组件上,我们可以使用批量绑定
- v-bind 批量绑定 直接使用 v-bind="需要展开的对象名即可",此种写法不能简写

### v-on 事件绑定

1. 事件的书写和 methods 选项

- 使用 v-on 执行给模板绑定原生事件
  `<button v-on:click="changeWeather">改变天气</button>`
- 事件函数写在哪里?
  - 原则上来说,在 data 中书写函数,并且是箭头函数,函数内的 this 是指向当前的 vue 实例对象,但是一旦写成了普通函数,则 this 指向全局 window,严格模式下会指向 null,都不是我们想要的,但是我们不会把函数书写在 data 中,1.必须书写箭头函数 2.函数和数据混杂在一起不容易维护(data 就是为了写数据的)
  - methods 选项中用来书写方法,比如事件回调函数,也有我们自己封装的函数等。methods 中的方法已经被 vue 统一处理过了,vue 控制 methods 中所有的方法的 this 指向当前的 vue 实例，为什么要把 methods 方法的 this 指向 vm 实例呢?因为方法一般都是用来操作数据的,而数据都在 vm 实例上放
- methods 中的方法也会全部的放在 vm 实例上,供我们使用

2. event 事件对象的获取

- 默认事件函数接收的第一个参数就是 event 事件对象(js 的 event 对象),我们可以直接接收使用
- e.target 就能获取当前事件所在的元素(真实 DOM)
- 当事件函数传递参数的时候，则事件函数的第一个参数不再默认是 event 事件对象了，在事件指令的插值语法区域，默认存在着一个变量$event代表的就是当前事件的event事件对象，如果传参的事件函数需要event事件对象,我们可以直接把$event 显性的传递进事件函数中

3. 事件函数的传参

- 如果想要给事件函数传递参数，则在绑定事件函数的时候，直接书写参数即可
- 在代码运行的时候，只要我们不触发事件，事件属性值的内容是不会有任何执行的
- 当事件触发以后，事件属性值内部的代码才会触发执行，并直接传入的参数

4. 事件逻辑的简单写法

- 如果事件的逻辑很简单,只是简单的一句操作数据,则可以不用书写函数,直接把逻辑写在事件的插值中即可

5. 事件修饰符

- 修饰符是对某条指令的补充
- .stop:阻止事件传播
- .capture:让当前的事件在捕获的阶段执行
- .prevent:阻止默认事件
- .self:只有事件真正发生在自己身上的时候才会触发
- .once:一次性事件
- .enter:按键修饰符-回车键
- ... 其他按钮修饰符

### v-model 数据双向绑定

1. v-model 的基础使用

- v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定
- 双向数据绑定:1.表单的值由 v-model 接收的数据决定,2.当表单内部的值发生修改的时候,v-model 对应的数据也会发生修改
- v-model 的主要作用就是用来收集表单数据!!!!

2. v-model 的本质

- 其实 v-model 是一个语法糖:
- 我们可以不使用 v-model 来实现 v-model 的功能，v-model 的本质:
  1. v-bind:value="xxx"(给表单的 value 强制绑定数据)
  2. @input="xxx=$event.target.value"(监听表单值的改变,去改变数据)

3. 收集表单数据

- 普通文本框和文本域：使用字符串收集
- 多选框单独使用：使用布尔值收集
- 多选框多个使用：使用数组收集
- 单选框使用：使用字符串收集
- 下拉列表单选：使用字符串收集
- 下拉列表多选：使用数组收集

4. v-model 的修饰符

- .lazy 修饰符:

  - 本身 v-model 本质是 input 事件(表单只要改变)就会触发
  - 当给 v-model 添加.lazy 修饰符后,就会把本质的 input 事件改为 change 事件(表单改变并失去焦点触发)

- .number 修饰符

  - 本身 v-model 收集输入框的内容都是字符串
  - 如果添加上.number 修饰符后,就会尽量把输入的内容转为数字,类似于 parseFloat(但是如果真无法转数字的话,不会转为 NaN,而是被迫收集字符串了)

- .trim 修饰符
  - 收集表单数据的时候去掉前后的空格

### 条件渲染

1. v-if 的使用

- v-if:接受一个布尔值,或者会隐式转换为 boolean 值,如果为 true 则当前的元素就会渲染到页面中,如果为 false 则当前的元素不会渲染
- 在 <template> 元素上使用 v-if 条件渲染分组
  - 因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？
  - 此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。
  - 最终的渲染结果将不包含 <template> 元素。

2. v-else

- v-else:你可以使用 v-else 指令来表示 v-if 的“else 块”
- v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

3. v-else-if

- v-else-if:顾名思义，充当 v-if 的“else-if 块”，可以连续使用,类似于 v-else
- v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

4. Vue 中 key 的作用:

- key 是虚拟 DOM 对象的标识,可以准确的让 diff 算法进行新旧虚拟 DOM 的比较
- 规则:
  - 如果在旧的虚拟 DOM 中没有发现和新的虚拟 DOM 相同的 key,则要创建新的真实 DOM
  - 如果在旧的虚拟 DOM 中找到了和新虚拟 DOM 相同的 key,还要对比内部的内容是否一致,如果一致则直接复用旧的真实 DOM,否则创建新的真实 DOM
- 如果没有写 key
  - vue 会按照虚拟 DOM 的顺序依次比较,如果有破坏顺序的操作,则很可能产生没有必要的更新
  - 如果结构中出现了输入类的 DOM,可能会有错误的复用
- 为什么不能使用 index 作为 key
  - 默认 diff 算法比较的时候就是按照顺序比较的,而 index 也是按照顺序添加了
  - 一旦有逆序操作,则会产生额外的更新

5. v-show

- v-show 指令:根据条件决定是否展示元素 。
- 和 v-if 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。
- v-show 只是简单地切换元素的 CSS 的 display 属性。
- 不能在 <template> 元素上使用 v-show 条件展示

6. v-if 和 v-show 的区别

- v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
- v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
- 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

### 列表渲染

1.  v-for 的使用

- 基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 `item,index in data` 或者 `item,index of data`
- item 和 index 都是属于当前列表块内部的数据,在列表块内部可以直接使用
- item 是每次遍历出来的值,index 是当前值的下标
- v-for 一定要在列表渲染的元素上添加 key 属性,用户优化 diff 算法(如果没有 key 则新旧 DOM 默认按照顺序比较,一旦有破坏顺序的操作,则为增加额外的开销),并且不建议 key 使用 index 下标(因为按下标来的话,其实还是按照顺序比较的)
- 类似于 v-if，你也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。
- v-for 可以遍历数组,对象,字符串,数字等等数据格式

### 其他指令

1.  v-text 和 v-html

- v-text 的使用:更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值
- v-html 的使用:更新元素的 innerHTML。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代

2.  v-once 和 v-pre

- v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
- v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

3.  v-cloak

- v-cloak 指令是在 vue 一旦介入之后,会清理掉,也就是说 v-cloak 指令只在 vue 介入之前生效
- 一般是用来控制在 vue 介入之前隐藏 vue 的一下语法
- 但是未来在脚手架中不会使用,因为脚手架中的 index.html 文件的 div 容器内部本身就是空的

## 修改 vue 的数据

1.  修改数据方式:修改简单数据类型

- 响应式:当数据修改的时候,视图也会发生更新,我们称作为响应式
- 简单类型的数据，包括 number boolean bigInt string 等
- 修改这类型的数据，我们可以直接赋值，vue 也能监听到数据发生的变化，然后对 DOM 作出修改。也就是具有响应式

2.  修改数据方式:修改数组数据类型

- 直接通过下标修改数组:是不具备响应式的
- 通过修改 length 来修改数据:是不具备响应式的
- 使用数组的方法修改数组的值,数组的方法分为两类:修改原数组和返回新数组
  - 修改原数组方式(变更方法)如下:push pop shift unshift sort reverse splice,Vue 将数组的变更方法进行了包裹，所以它们也将会触发视图更新
  - 返回新数组:则可以直接替换原来的数组即可

3.  修改数据方式:修改对象数据类型

- 操作对象类型的方式 1:直接替换对象的属性值,具有响应式
- 操作对象类型的方式 2:新增属性,不具备响应式,所以初始化数据的时候要把所有的属性都预先设置出来,不要将来去新增
- 操作对象类型的方式 3:删除属性 不具备响应式
- 操作对象类型的方式 4:直接替换对象的值,具备响应式

4.  set 和 delete 方法

- 因为 vue2 响应式原理的底层原理无法监听对象的删除和新增
- vue2 新提供了两个方法,可以响应式的新增和删除对象的属性(Vue.set()和 Vue.delete() 或者 this.$set()和this.$delete())

## 计算属性和 watch

1. 计算属性(computed)

- 也是一个属性值,只不过属性值是通过计算得到的
- 计算属性配置在 computed 配置项中
- 优点:计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值
- 计算属性 vs 方法:方法只要调用就会重新求值,方法多次调用没有缓存
- 计算属性 vs 插值语法中书写逻辑:臃肿,不方便识别是什么功能
- 计算属性可以设置 getter 和 setter 函数,进行可读可写操作,setter 函数接受的参数就是新设置的值

2. watch(侦听器)

- 作用:监听一个 data 数据或者一个计算属性值的改变,他只负责监听,后续操作由业务逻辑决定
- watch 可以设置立即监听(immediate)
- watch 可以设置深度监听(deep)
- watch 的回调函数 handler,接受两个参数(newValue,oldValue),但是如果监听的是对象,则新值和旧值是一样的
- watch 如果不需要设置立即监听和 deep,则可以直接书写为一个函数,默认这个函数就是 handler 函数

3. watch 和 computed 的对比

- watch 和 computed 它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候,我们处理一些逻辑
- 区别：
  - computed 能完成的功能，watch 都可以完成。watch 能完成的功能，computed 不一定能完成，最具代表性的：watch 可以进行异步操作。
  - watch 擅长处理的场景：一个数据影响多个数据 ，侧重在【监视】，核心是：xxx 变了，我要做???事。无需 return，靠内部逻辑去完成要做的事。例如当需要在数据变化时执行异步或复杂的业务逻辑处理操作时，这个方式是最有用的
  - computed 擅长处理的场景：一个数据受多个数据影响 (购物车商品结算的时候)，侧重在【算】，核心是：计算出来的值。靠 return 来输出计算的结果以供使用。不能开启异步任务。

## 生命周期

1. 什么是 Vue 的生命周期:

- 说的是 Vue 实例或者是组件实例从创建到销毁的过程
- 在 vue 的生命周期过程中经历了从初始化==>模板编译阶段==>挂载阶段==>更新阶段==>销毁阶段 5 个阶段

2. 初始化阶段

- new Vue():创建了一个 Vue 的实例对象
- 初始了事件和生命周期,也就是说目前的 vue 实例对象上只有默认的生命周期函数和一些默认的事件
- [[beforeCreate]]生命周期函数,在数据代理和数据劫持之前,此时是无法访问到数据和方法的
- 把数据和方法注入到 vm 实例上,并激活响应式,也就是完成了数据代理和数据劫持
- [[created]]生命周期函数:在数据代理和数据劫持之后,此时是第一个能够访问数据和方法的生命周期函数

3. 模板编译阶段

- 判断 options 中是否有 el 选项,如果有则继续向下,如果没有则等待$mount 被调用(如果等不到就会一直等下去)
- 判断 options 中是否有 template 配置项
  - 如果有则编译 template 配置项生成渲染函数(内部都是虚拟 DOM)
  - 如果没有则把 el 容器的 outerHTML 作为模板 编译生成渲染函数

4. 挂载阶段

- [[beforeMount]]:在挂载之前,页面呈现的是未经 Vue 编译模板 DOM 结构
- 根据模板编译阶段得到的渲染函数创建真实 DOM,并替换掉 el 的容器(其实就是把虚拟 DOM 编译成真实 DOM 并放在页面中),这个就是挂载的过程
- [[mounted]]:在挂载之后,页面呈现的是已经被 vue 编译过的真实 DOM 结构,我们会经常的在 mounted 中进行初始化一些操作(设置定时器,发送请求,初始化订阅,绑定自定义事件)

5. 更新阶段

- 监听 data 的改变,进入更新阶段
- [[beforeUpdate]]:更新之前,说的是数据更新之后视图更新之前
- 根据更新的数据生成新的虚拟 DOM,然后新的 DOM 和旧的虚拟 DOM 进行 diff 算法比较,并更新视图
- [[updated]]:更新之后,说的是数据更新之后,视图更新之后

6. 销毁阶段

- 当 vm.$destroy 方法被调用的时候进入销毁阶段(组件切换(路由或者条件渲染)等过程其实也是销毁和重建的过程)
- [[beforeDestroy]]:vm 实例或者组件实例销毁之前，我们要在这个位置做一些清理收尾工作(比如关闭定时器,和取消订阅等操作),但是在这个位置操作数据是没有任何意义的
- 执行销毁操作：销毁的含义:完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器
- [[destroyed]]:销毁之后,此时已经完全销毁了，我们做什么操作都是无效的，所有这个生命周期函数基本不会使用

7.脚手架中组件的生命周期

- 脚手架中项目,是先打包后生成 dist 目录了,然后再去 devServer 服务器运行的
- 打包好的目录中 vue 是没有模板编译选项的,所以我们学习的完整的生命周期流程此时是行不通的,因为我们要加载一个组件的时候,没办法走模板编译阶段
- 其实在在脚手架中,我们打包项目的时候,脚手架内部的模板编译包就已经预编译了所有的模板为渲染函数
- 当我们需要某个组件的时候,其实是不再需要重新渲染了,而是直接可以跳过模板编译流程

## 组件

1. 创建组件:

- Vue.extend(options)方法创建组件
- options 的写法和 new Vue 时的 options 写法类似,只是没有 el 选项,因为只有 vm 决定服务哪一个容器,而组件都是基于 vm 的
- 我们希望给每一个组件都添加一个 name 配置项,代表当前组件的名称,目前的作用是为了在开发者工具区分组件
- Vue.extend 返回一个 VueComponent 构造函数,每次组件在使用的时候,都会被实例化,得到一个组件实例
- 组件的模板有且只能有一个根元素

2. 组件的使用:

- 首先创建一个组件,得到一个 VueComponent 构造函数
- 要在父组件中或者 vm 实例中进行注册,才可以使用,需要使用 components 配置项进行注册
- 在模板中通过标签的方式使用组件,单双标签都可以(在非单文件组件中,组件尽量写成双标签)

3. 组件的嵌套:

- 组件和组件之间是可以进行嵌套的
- 组件之间的关系分为:父子组件,兄弟组件,祖孙关系组件,任意关系组件

4. 组件实例:

- 每次创建一个组件最后会得到一个这个组件对应 VueComponent 构造函数
- 当组件被注册并使用的时候,就会把这个 VueComponent 构造函数给实例化,得到一个实例化对象(组件实例化对象,组件实例)
- 当前组件的数据,方法等等都会在自己的组件实例上存放
- 可以理解为组件实例就是小型的 vm 实例

5. 一个重要的内置关系:

- 问?想要给每一个组件实例扩展一个 count 属性,则给 VueComponent.prototype.count 设置是否所有的组件就有 count 属性了?
- 答:不是,因为每一个组件都有自己的 VueComponent 构造函数,并不是只有同一个 VueComponent 构造函数
- 组件实例的原型链:组件实例==>当前组件的 VueComponent 构造函数的原型对象==>Vue 构造函数的原型对象==>Object 构造函数的原型对象==>null
- 从上边原型链所看,VueComponent 构造函数是继承了 Vue 构造函数 (VueComponent.prototype.\_\_prototype===Vue.prototype)
- 得到结论:想要让所有的组件都能访问到一个属性,则我们需要把属性放在 Vue.prototype 上才可以

6. 创建组件的简写

- 创建组件的时候,Vue 提供了一个简写,可以直接书写为一个配置对象即可
- 注册组件的时候,如果 App 是一个对象,则 Vue 认为他是创建组件时传入的配置对象,所以就先使用 Vue.extend 方法,传入这个配置对象,然后得到 VueComponent 对象以后,再注册

7. 全局注册组件

- 假设某个组件是一个公共组件,我们可以直接全局注册这个组件,那么就可以在任意组件中直接使用
- 使用 Vue.component('组件名称',组件)对某个组件进行全局注册

## 脚手架

1. 脚手架的安装

- `npm i -g @vue/cli`:全局安装 vue 的脚手架安装命令
- `vue -V`:查看 vue 版本
- `vue create xxxx`:安装 vue 脚手架
  - 选择` Manually select features`:手动选择配置
  - 选择`babel`和`linter`
  - 选择`2.X`
  - 选择` ESLint with error prevention only`
  - 选择` Lint on save`:Eslint 在我们保存代码的时候检查
  - 选择`In dedicated config files`:把 eslint bable 等配置独立成一个文件
  - 选择 N(默认)

2. 脚手架外层目录介绍

- public/:公共目录,webpack 在打包的时候,是忽略这个目录的,会把目录中的除了 index.html 以外的文件,直接复制了一份到打包好的目录中
- src:开发目录
- .browserslistrc:告诉 babel 在编译的时候,要兼容的浏览器列表有哪些
  - `> 1%`:目前有超过百分之 1 的人在使用的浏览器
  - `last 2 versions`:至少兼容最后两个版本
  - `not dead`:没有死亡的浏览器
- .eslintrc.js:eslint 的配置文件
- .gitignore:git 的忽略文件
- babel.config.js:babel 的配置文件,Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中
- package-lock.json:包管理器的缓存文件
- package.json:包管理文件
- jsconfig.json:存在于根目录,主要用优化开发者的开发体验
- vue.config.js:vue 脚手架的配置文件

3. src 目录内容介绍

- assets:公共资源目录(多个组件共享的公共资源),将来会被打包编译
- components:组件所在的文件夹
- App.vue:App 组件
- main.js:入口文件
- pages/views:
- api:
- utils:
- router:
- store:

3. eslint 在非脚手架环境下使用

- `npm init`:初始化包管理文件
- `npm i eslint`:下载 eslint 包
- `npx eslint --init`:初始化 eslint 配置文件(一步一步生成)
  - To check syntax and find problems
  - None of these
  - None of these
  - Does your project use TypeScript? » No
  - Browser
  - What format do you want your config file to be in? · JavaScript
- 如果不想一步步生成,则不需要第三步的操作,直接复制一个写好的 eslint 配置文件即可
  ```js
  module.exports = {
    //环境变量的配置
    env: {
      //当前是在浏览器环境下
      browser: true,
      //js语法环境支持到es2021
      es2021: true,
    },
    //指定继承一些已经存在的规则,
    //eslint:recommended指的是eslint所有的规则中前边打对号的都要
    extends: "eslint:recommended",
    //编译配置兼容最新的es版本
    parserOptions: {
      ecmaVersion: "latest",
    },
    //我们配置的额外的规则
    /* 
        "off" or 0 - 关闭规则
        "warn" or 1 - 将规则视为一个警告（不会影响退出码）
        "error" or 2 - 将规则视为一个错误 (退出码为1)
        */
    rules: {
      "no-console": 2,
    },
  };
  ```

4. eslint 在脚手架中的配置和使用(希望在我们打包项目的时候,eslint 先介入检测)

- `npm init`初始化包管理文件
- `npm i eslint@7 -D`:下载 eslint 包
- `npm i eslint-loader@4 -D`:下载 eslint 包
- `npx eslint --init`:初始化 eslint 配置文件
- 我们把我们书写的代码放在 src 目录中,配置 webpack 打包 src 目录,在打包的时候 eslint 检测
- 配置`webpack.config.js`文件
  ```js
  const path = require("path");
  module.exports = {
    entry: "./src/main.js",
    output: {
      path: path.resolve(__dirname, "build"),
      filename: "dist.js",
    },
    mode: "development",
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "eslint-loader",
        },
      ],
    },
  };
  ```
- 运行`webpack`打包目录,发现有 eslint 检测

5. 忽略 eslint 检查

- 直接在`eslint配置文件`中的 rules 中 关闭某个规则
- 使用注释忽略对某一行的 eslint 检查`//eslint-disable-next-line  xxxx`
- 使用注释忽略对当前文件后边所有代码的 eslint 检查`/* eslint-disable XXX*/`

6. 运行时环境的 vue 版本分析

- 如果不使用 render 函数,则会有如下报错:

  - You are using the runtime-only build of Vue where the template compiler is not available:你正在使用一个运行时环境的 vue 包,这个 vue 包的模板编译是不能使用的
  - Either pre-compile the templates into render functions, or use the compiler-included build.:要么你可以使用 render 函数来处理模板预编译,要么你可以使用编译器构建

- 为什么使用运行时(vue.runtime.js)的 vue 包
  - 在脚手架中,vue 把完整的 vue 包分为了两个包:vue 运行时版本的包+模板编译包
  - 因为脚手架中的项目是先打包后运行,而模板编译是在打包的时候就已经把模板编译为一个渲染函数(只要调用这个函数,就会得到虚拟 DOM)了
  - 所以在项目运行的时候(打包好的项目中),是不需要模板编译这个选项了,而是只需要 vue 的其他功能
  - 模板编译这段代码,在 vue 包中大概占用了 40%的资源,所以把模板编译编译选项单独列出来,在打包的时候,打包以后的项目是没有模板编译这个代码的,减小占用资源

7. 单文件组件的写法

- 提供了三个区域,分别用来书写模板,逻辑,样式
- 这三个区域分别使用 template 标签,script 标签,style 标签来区分

8. style 标签的 scoped 属性

- 我们在组件的 style 标签中书写的样式在打包后,其实是可以通用的,也就是不只是能控制自己组件的元素样式(这样并不一定合理)
- 我们可以给 style 标签添加一个 scoped 属性,则这个 style 标签中的样式就只有对当前组件内的元素生效了
- scoped 原理??????
  - 首先给当前 scoped 所在的组件所有的结构添加一个自定义属性(如果是组件,则给组件的最外层元素添加)
  - 给当前 scoped 所在的 style 中所有选择器都添加一个属性选择器,属性是当前组件结构中添加的自定义属性
  - 所以 scoped 所在的 style 中的选择器只能选择自己组件的元素或者子组件的最外层元素进行控制

9. 样式穿透,深度选择器原理
   - 什么叫样式穿透?正常来说,scoped 属性要给所有的选择器添加自定义属性选择器,那我我们无法控制后代组件内的样式,我们希望通过一种办法能够控制后代组件的样式,这种方法被称作为样式穿透
   - 样式穿透原理:如果我们在两个选择器之间书写了深度选择器(>>>) 则深度选择器会转为后代选择器,并且其后所有的选择器将不再添加属性选择器

## Vue 的组件化编程知识点

1. ref 属性

- 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件实例的 $refs 对象上
- 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素(如果以后考虑获取真实 DOM 则可以使用 ref)
- 如果用在子组件上，引用就指向组件实例,其实也是未来组件通信的一种方式
- 注意事项:
  - 因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！
  - $refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

2. props 基础使用

- props 基础是用来做父子组件通信(父子组件之间的传值)
- Props 用法:
  - 你可以在组件上注册的一些自定义属性,则这个属性会把接受到的属性值作为数据,传递给组件内部
  - 我们在组件内部需要通过 props 选项来接受父组件传递的 props 属性
  - props 的类型可以是一个数组,数组中是我们要接受的 props 属性名字符串
  - 我们一旦接受到了 props 属性,则会把属性直接放在组件实例上,供我们直接使用

3. props 的只读特征

- 切记!!!!!props 是只读属性,不允许被修改!!!!
- 但是会有人钻空子,如果一个数据是对象类型,我们不替换对象,而是修改了对象内部的属性,其实也算是修改了 props,但是 vue 不会报错,因为地址没变,它没有监听到 props 被修改
- 我们不推荐任何修改 props 的做法

4. props 的批量传递

- 有的时候我们要把一个对象传递进子组件中,我们可以选择把整个对象直接传递进入,也可以选择把对象展开一个个属性传递进入
- 如果要展开一个个传递进去,属性过多就会写的非常复杂
- 我们可以在组件上使用`v-bind="对象"`写法,就可以把对象展开依次传入到组件内部

5. props 限制的写法

6. props 做子传父

- 当父组件给子组件传递一个函数类型作为 props 的时候,就说明要接受子组件的传值
- props 自己封装一个函数，并把函数通过 props 的形式传递给子组件
- 子组件接受这个函数,并调用传参
- 父组件的函数就被执行,并且接受到了参数,完成子传父 \*总结:
  - props 传值:父传子
  - props 传函数:子传父

7. 过滤器的使用

- Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化
- 你可以在一个组件的选项中通过 filters 选项定义本地的过滤器
- 创建 Vue 实例之前全局定义过滤器,使用 Vue.filter 方法
- 过滤器函数将会收到 被过滤的数据 作为第一个参数
- 过滤器是 JavaScript 函数，因此可以接收参数,从过滤器函数的第二个形参开始接受我们传递的参数

8. 自定义指令的使用

9. 自定义指令的钩子函数

10. 插件的使用