# vue-cli-0822

**Repository Path**: huanghe01/vue-cli-0822

## Basic Information

- **Project Name**: vue-cli-0822
- **Description**: vue-cli-0822vue-cli-0822vue-cli-0822vue-cli-0822vue-cli-0822
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## 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
        }
      ]
    }
  ```

24. 浏览器的事件轮询机制
  * js代码分为了同步代码和异步代码
  * 其中异步代码又分为了宏任务和微任务
    - 宏任务:整体的script,定时器,ajax,事件
    - 微任务:Promise.then/catch/finally  async/await
  * js执行代码的顺序:先执行异步(整体的script)-->再执行同步--->再执行异步
  * 事件轮询机制的过程
    - js执行主线程同步代码
    - js遇到宏任务会把宏任务交给浏览器的对应的管理模块(其实就是浏览器开启的多线程)
    - js遇到微任务,会把微任务的回调函数直接放在微任务的回调队列中
    - 当浏览器的管理模块中的异步需要被执行的时候,就会把回调函数放在宏任务回调队列中
    - 当js主线程的同步代码执行完毕的以后,会先清空微任务队列,然后再去执行宏任务队列中的回调
    - 当每次执行完一个宏任务的时候,都会去再次清空微任务队列
    - 轮询检测宏任务队列中是否有代码需要执行

25. 执行上下文
  * JS引擎并不是一行行的解析和执行代码，而是一段段的去分析和执行，当执行一段代码时,先开始做一些准备工作(1:开辟一块内存空间  2:创建变量对象（VO） 3:确定作用域链  4:确定this指向),这个准备工作被称作为执行上下文
  * js可执行的代码段分为2种类型: 全局代码 、 函数代码 
  * 每执行一段代码，都会创建相对应的执行上下文，在脚本中可能存在多个执行上下文,因为有太多的执行上下文， JS创建了一个执行上下文栈（stack） 用来管理执行上下文
  * 当js开始解析程序的时候，最先遇到的全局代码，此时向执行上下文栈中 压入一个全局执行上下文，全局的一定是在整体运行结束以后(页面关闭)才被清空
  * 当执行一个函数的时候 会创建一个函数的执行上下文，并压入到执行上下文栈中，只要函数执行完成，会将函数从栈里弹出

26. 变量对象(声明提升的原理): 
  * 变量对象是 ECMAScript规范术语。在一个执行上下文中,变量对象才被激活
  * 变量对象是储存了在上下文中定义的形参,实参,变量和函数声明
  * 全局执行上下文的变量对象其实就是全局对象window,因为全局的变量和函数都是window对象的属性和方法
  * 每次进入一个函数的的时候会创建对应的执行上下文,执行上下文的第一步就是创建变量对象(VO),收集所有形参,实参,变量声明和函数声明
    - 先收集所有的形参和实参
    - 再检查所有声明的函数,如果变量对象已经有相同名字的属性，则完全替换
    - 检查所有的声明的变量,变成变量对象的属性，值是undefined,如果变量名和已经声明的形参或函数相同，则变量声明不会干扰已经存在的这类属性

27. 作用域链
  * 作用域链的用途,是保证对 执行环境有权访问的所有变量和函数 的有序访问
  * 作用域链是在当前函数被声明的时候,就已经产生了,但是没有最前端当前函数的变量对象
  * 函数执行的时候会创建自己的变量对象,并把自己的变量对象推入该作用域链的前端形成完整的作用域链
  * 作用域链的前端,始终都是当前执行的代码所在环境的变量对象。全局执行环境的变量对象window始终都是作用域链中的最后一个对象。
  * 标识符解析是沿着作用域链一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始，然后逐级地向后回溯,直至找到标识符为止(如果到window还找不到标识符,如果是查询值通常会导致错误发生)

28. this指向
  * 先判断当前函数是否是call/apply/bind调用,如果是,则指向强制绑定的那个值
  * 判断当前函数是否是被new实例化调用,如果是,则可能指向实例化对象,也可能指向构造函数的返回的对象类型
  * 判断当前函数是否是被一个上下文对象调用,如果是则指向上下文对象(注意隐式丢失的情况 var fn = o.fn; o.fn = o1.fn)
  * 函数默认调用,this指向window
  * 严格模式下,如果某个函数没有调用者,则内部的this指向undefined
  * 箭头函数没有自己的this,需要沿着作用域链去上一级函数查询this




## 复习--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 较好。

### 列表渲染
01. 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可以遍历数组,对象,字符串,数字等等数据格式

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

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

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

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

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

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

04. 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. 自定义指令的基础使用
  * 需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令,所以自定义指令主要用来操作DOM
  * 局部注册自定义指令使用directive配置项,每一个指令都是一个函数,函数接受两个参数,一个是当前的DOM,一个是当前指令的详细(里边有一个value属性就是指令的值)
  * 我们可以在自定义指令的函数中对底层的DOM操作即可
  * 全局注册自定义指令使用 Vue.directive("指令名称",fn)

9. 自定义指令的钩子函数
  * bind:初始化指令的时候执行
  * inserted:被绑定元素插入父节点时调用
  * update:所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前
  * componentUpdate:指令所在组件的 VNode 及其子 VNode 全部更新后调用
  * unbind:只调用一次，指令与元素解绑时调用
  * 我们在定义自定义指令的时候直接书写一个函数,则默认是bind方法,如果想写钩子函数,则定义的时候要书写一个对象格式

10. Vue的插件及使用
  * 当全局扩展一些内容的话,我们可以把逻辑封装起来,使用插件引入项目
  * 常见使用插件的内容:1.全局过滤器 2. 全局自定义指令 3. 全局组件 4. Vue的原型对象上的方法或属性
  * 封装插件的时候我们可以暴露一个对象(对象内部必须拥有install方法),或者暴露一个函数,install方法或者这个函数默认接受Vue作为参数
  * 我们在入口文件中引入这个插件,并且使用Vue.use()使用插件,如果插件是对象,则默认调用对象的install方法,如果插件是函数,则默认当做是install方法调用,都会传递进入一个Vue作为参数

## 组件通信
1. Vue组件通信-自定义事件
  * 什么是自定义事件
    + 我们如果想要进行子传父的组件通信,可以选用自定义事件
    + 给子组件绑定自定义事件,事件函数在父组件中
    + 在子组件内部触发自己身上的自定义事件,处在父组件中的事件函数就会执行
    + 我们可以在触发自定义事件的时候,传递参数,父组件的事件回调函数就能接到参数
  * 绑定事件的方式
    + 直接在组件上使用 @xxx=""绑定自定义事件(1.自定义事件名称可以和原生事件同名,但是仍然是自定义事件 2.自定义事件建议命名 xxx-xxx的格式,而不是驼峰写法)
    + 我们还可以直接获取到子组件的组件实例,使用 $on或者$once(一次性事件)的方法绑定事件
  * 调用事件的方式
    + 直接使用 组件实例上的 $emit调用事件即可,第一个参数是事件名称,后边的参数是依次传递的值
  * 解绑事件的方式
    + 使用组件实例的$off方法进行解绑
    + $off("xx"):解绑某个事件
    + $off([]):解绑多个事件
    + $off():解绑所有的事件
    + $off可以在子组件和父组件中都能使用

2. 组件通信方式-PubSub
  * PubSub是我们使用第三方包进行任意组件通信的
  * 思想是pubsub提供了一个对象作为中介，数据的传输方可以给这个中介发布某些固定名称的数据，数据的接收方可以在这个中介订阅某些固定名称的数据,一旦发布新的数据,则订阅方就会收到pubsub的通知,接收数据执行函数
  * 发布:PubSub.publish("name",data)
  * 订阅:PubSub.subscribe("name",fn)

3. 组件通信--事件总线
  * 思路
    + 事件总线内部使用自定义事件来完成组件通信的，但是主要做的任意组件通信
    + 我们找一个可以被绑定自定义事件的东西（vm），放在所有组件都能访问到的地方（Vue.prototype）,起一个名字叫做$bus
    + 在接收数据的地方的初始化中(mounted)中,给$bus绑定自定义事件,事件函数在当前组件内部
    + 在发送数据的地方给$bus调用自定义事件并传值,则绑定事件的组件就会收到事件调用,并调用函数,最后完成了传值
  
  * $bus的绑定
    + 我们在new Vue的配置中书写一个beforeCreate生命周期函数中书写`Vue.prototype.$bus=this`
    + 因为内部的组件会在mounted中的绑定事件,所以我们必须在他的mounted之前把$bus绑定上去,所以要在(beforeCreate,created,beforeMount中任选一个绑定即可)

4. 组件通信-默认插槽

  * 在封装组件的时候,如果组件中某一块的结构,需要在组件使用的时候传递过来,我们就使用一个<slot></slot>内置组件标签占位,这个 slot 就是插槽的位置
  * 我们在使用组件的时候,如果要传递一个插槽,则直接在组件的双标签内部书写结构即可,组件内部的<slot>就会展示我们传递的结构

5. 组件通信-具名插槽

  * 我们封装组件的时候,可能需要被传递多个插槽结构,为了区分我们要给插槽命名,每一个 slot 标签上都可以书写一个 name 属性
  * 在使用组件传递插槽的时候,要使用 v-slot:XXXX 形式来定义我们传递到哪一个插槽中
  * v-slot 只能写在组件或者 template 标签上
  * v-slot 可以简写为#: v-slot:footer --> #footer

6. 组件通信-作用域插槽

  * 在向组件传递插槽结构的时候,我们想要拿到组件内部的一些数据(不管这个数据怎么来的),这个时候我们就要使用作用域插槽了
  * 在组件内部封装的时候,要使用 props 的形式向 slot 标签进行传递数据
  * 在向组件插入结构的时候,通过 v-solt:xxx="obj"来接收组件内部传递回来的数据,其中 obj 是对象(包含所有传递过来的数据)
  * 接收作用域数据的时候,支持解构,比如 v-slot:xxx="{content}"



## vuex
1. 创建基础的vuex仓库
  * 安装vuex@3 `npm i vuex@3`
  * 新建一个仓库文件夹和仓库文件`src/stores/index.js`
  * 初始化store仓库
    ```js
      //1. 引入vue和vuex
      import Vue from "vue";
      import Vuex from "vuex";

      //2. 使用vuex插件
      Vue.use(Vuex);

      //3.实例化一个vuex仓库,并暴露
      //4. 给仓库传入配置(state mutations actions getters modules)
      export default new Vuex.Store({
        state: {
          count: 0,
        },
        mutations: {},
        actions: {},
        getters: {},
      });

    ```
  * 在组件内使用(方式1):直接在组件中引入暴露的store对象,即可使用store的数据和方法
  * 在组件内使用(方式2):在入口文件使用Vue的store配置项,把store对象可以直接以$store属性名的方式注入到每一个组件实例上

2. 读取vuex中state的方法
  * 方式1:在模板中直接使用$store.state.xxxx的方式读取值
  * 方式2:可以使用计算属性拿到值,在模板中直接使用计算属性
  * 方式3:使用mapState辅助函数
    - mapState的使用,参数是一个数组或者对象,数组或对象内是我们要去store拿的值
    - mapState返回一个对象,对象内部其实就是读取值的对应的计算属性的方法
    - 使用对象展开运算符,把mapState的返回值在计算属性computed中展开

3. mutations修改state的值
  * 首先在store的mutations配置对象中封装函数,mutations中的函数是修改state数据的唯一途径,所有每一种修改state的操作都会在mutations中的方法内进行
  * mutations中的方法接受一个参数就是state对象,第二个参数是调用这个函数时传递的载荷(payload),我们建议传递载荷的时候使用对象
  * 在组件内使用$store上的commit方法来调用mutations中的函数,commit方法接受两个参数,参数1是事件类型(mutations中的函数名),参数2是调用函数时传递的载荷(payload),也就是参数
  * 在组件内使用commit方法调用mutations的函数
    + 直接在插值中使用`$store.commit(type,payload) `
    + 在methods中封装函数,函数中写`$store.commit(type,payload) `
    + 直接使用mapMutations辅助函数(可以接受一个数组或者对象),其实就是帮我们得到一个包含调用mutations方法的一个对象 ,我们直接在methods中展开即可

- 在actions中进行异步操作
  * 在mutations也可以异步修改state,但是开发者工具不会监听到数据的变化,导致工具和视图的数据不一致
  * 我们可以把异步获取数据或者异步操作放在actions中,然后异步操作结束之后,在actions内部提交给mutations对应的函数进行修改数据
  * actions接受两个参数,一个是一个阉割版的store对象,内部有commit的方法可以提交mutations,另一个参数就是组件中分发actions时传递的参数payload
  * 组件中调用actions的方法
    + 直接在插值中使用`$store.dispatch(actionsName,payload)`
    + 在methods中封装函数
    + 直接使用mapActions辅助函数(可以接受一个对象或者数据),其实就是帮我们获得一个包含分发actions方法的一个对象,我们直接在methods中展开即可

- 在getters中书写vuex的计算属性
  * 有时候我们需要从 store 中的 state 中派生出一些状态,需要使用vuex的getters
  * vuex的getters其实类似于vue组件的计算属性
  * getters内部的函数接受state作为参数,函数内部必须要返回一个值
  * 组件中使用getters的值
    + 直接在插值中使用`$store.getters.xxxx`
    + 在computed中封装函数
    + 直接使用mapGetters辅助函数

- Vuex的模块化
  * 如果多个功能的数据都保存在state中,则不好维护,数据及操作繁杂
  * 我们可以创建多个vuex的模块保存不同的数据
  * 过程
    1. 一个vuex模块其实就是暴露一个对象的文件,对象内部有自己的state mutations getters actions属性
    2. 在vuex的index中引入模块,并在new Vuex.store()的配置对象中使用modules属性配置模块即可
    3. 此时的模块只是模块化了state数据,并没有模块化getters mutations actions的东西
    4. 所以getters mutations actions正常使用,但是state需要`$store.state.模块名称.数据`获取
  * 模块的优化
    + 我们在暴露vuex模块对象的时候,添加一个属性namespaced:true(开启命名空间)
    + 并且在使用辅助函数的时候,直接把辅助函数的添加第一个参数是当前要获取值的模块名称即可
    + 如果不使用辅助函数,则在获取state数据的时候,要使用store.state.模块名.数据
    + 如果不使用辅助函数,则在获取getters mutations actions的时候,只需要在他们的名字前添加模块名即可,比如'count/increment'

- vuex数据的持久化
  * 面试常问:页面一旦刷新数据会丢失怎么办?---数据持久化
  * 手动数据持久化
    + 定义一个初始的state的值,给state赋值的时候先去localStorage中读取值,如果没有则得到初始的state的值
    + 在所有的mutations方法中,在改变state语句后 重新保存localStorage
  * 自动数据持久化
    + `npm install vuex-persistedstate --save`
    + 在store下的Vue.Store({})中使用插件plugins配置` plugins: [createPersistedState()]`

- 使用常量来替代mutations的事件类型
  * 可以在`mutation_types`的文件中定义所有模块的mutations事件类型,使用常量
  * 在mutations中事件名引入定义常量(注意使用属性名表达式)


## 路由
1. hash模式和history模式区别
  * hash模式
    - hash模式是一种把前端路由的路径用#拼接在真实URL后面的模式。
    - #后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发hashchange事件。
    - hash模式的浏览器兼容性较好，就是看起来不够优雅。

  * history模式
    - history模式用到了HTML5中的history API,允许开发者直接更新浏览器URL地址而不重新发起请求。
    - 用到了history API：replaceState、pushState、back、forward和go这个5个方法。
    - history兼容性不如hash模式，而且浏览器在刷新的时候会按照路径发送真实的资源请求，因此在线上部署基于historyAPI的单页面应用的时候，一定要后端配合支持才行
    - 后端配合:你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面

2. 初始化路由引入
  * 安装路由`npm i vue-router@3`
  * 在`router/index.js`中引入Vue和VueRouter
  * 使用`VueRouter`插件
  * 实例化一个VueRouter对象`new VueRouter({配置})`
  * 把VueRouter暴露出去
  * 在入口文件中引入Router,然后在Vue的配置项中使用router选项把$route和$router注入到每一个组件实例上

3. 配置一级路由
  * 在router的配置项中配置routes配置项,值是一个数组,数组包含多个路由映射关系配置对象,其中`path`代表要去匹配的路由地址,`component`是展示的路由组件
  * 路由组件一般会放在`pages`文件夹中,而`components`文件夹一般用来放公共组件
  * 我们需要在展示路由组件的地方书写一个`<router-view>`组件,这个组件专门用来渲染路径匹配到的视图组件

4. 配置二级路由
  * 在routes的某一个需要配置二级路由的某个一级路由的配置对象中 添加一个children属性,值是一个数组,数组中可以书写多个二级路由的对象配置
  * 在一级路由展示的路由组件中 书写二级路由的占位组件`<router-view>`
  * 注意二级路由的path要么书写完整路径比如`/home/news`,要么值书写当前path比如:`news`

5. 默认路由和默认子路由
  * 在一级路由中,我们可以使用redirect属性进行重定向路由
  * 在二级路由中,我们也可以使用redirect属性进行设置默认子路由(直接写在一级路由上设置默认子路由.或者写在二级路由配置中新增一个空的规则,然后重定向)
  
6. 命名路由
  * 有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。
  * 可以在创建 Router 实例的时候，在 routes 配置中给某个路由通过name属性设置名称。

7. 编程式路由导航
  * 我们还可以借助 router 的实例方法`$router.push()`来进行定义导航链接
  * 该方法的参数可以是一个字符串路径,比如`$router.push("/home/news")`
  * 或者一个描述地址的对象,对象内部有name和path属性可以控制导航到哪一个路由,path和name随意使用一种即可,path的值是完整的地址,name的值是路由的命名
  * 编程式路由导航的其他方法
    + `router.replace()`:和router.push一致,但是不会留下任何的历史记录
    + `router.back()`:历史记录回退1
    + `router.forward()`历史记录前进1
    + `router.go(n)`历史记录前进或回退n

8. 编程式路由导航重复点击bug
  * 编程式路由导航重复点击的时候会出现报错,报错的原因是:如果重复导航push或者replace则会返回一个失败的promise实例,但是push原本没有做任何处理,所以浏览器会报错,表示有失败的promise没有被处理
  * 解决方式
    + push可以接受第二个和第三个参数,分别是导航成功和导航失败的回调函数,如果我们书写了第三个参数处理导航失败(函数内容随意),则解决错误
    + 如果push没有书写第二个和第三个参数,则push会返回一个失败的promise,我们可以使用catch(()=>{})来处理这个错误即可解决
    + 最终写法,我们可以重写`VueRouter.prototype.push`方法,内部让原始的push都添加上第三个回调函数即可

9. 声明式路由导航
  * 声明式路由导航,使用router-link组件
  * 其实router-link组件内部也是使用的router.push进行导航
  * 其中:to属性接受的参数就是push方法接受的location参数,用来控制跳转
  * 其中:tag属性有时候想要 <router-link> 渲染成某种标签， 我们使用 tag 指定何种标签，同样它还是会监听点击，触发导航
  * 其中:replace:设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
  * 其中:active-class:设置链接激活时使用的 CSS 类名

10. 切换路由模式
  * 在router的配置中使用mode配置项,设置为history即可切换为history模式

11. Vue的动态组件
  * Vue提供了一个<component>组件,可以用来做动态组件
  * <component>是一个占位符,接受一个is属性,is属性的值是一个 字符串类型的已经被引入和注册的组成的名称,并且is必须要求强制绑定才可以
  * 我们可以通过改变is强制绑定的值,来切换替换<component>的组件

12. Vue动态组件的keep-alive
  * `<keep-alive>` 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
  * `<keep-alive>` 默认缓存所有动态组件
  * 属性:`include` 和 `exclude` prop 允许组件有条件地缓存
    + `include和exclued`写法1逗号分隔字符串:`<keep-alive include="Count,Movie"> `
    + `include和exclued`写法2数组:`<keep-alive :include="['Count']">`
    + `include和exclued`写法3正则表达式:`<keep-alive :include="/Count/g">`

13. keep-alive的生命周期函数
  * activated:被 keep-alive 缓存的组件激活时调用。
  * deactivated:被 keep-alive 缓存的组件失活时调用。

14. 在路由中使用keep-alive
  * 路由的切换原理也是动态组件
  * 所以路由的router-view组件外也可以嵌套keep-alive组件,并可以使用keep-alive的属性及生命周期

15. import方法动态引入模块
  1. 如果我们想要动态(异步)的引入某个模块,我们需要使用import方法
  2. import方法返回一个promise对象,用来监听import引入资源的状态,promise的值就是当前的模块
  3. 它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块

16. vue的异步组件
  * 我们如果直接使用import模块化引入vue模块，则webpack在打包构建的过程中，会把所有的js都打包到了一起，但是里边包含了很多我们暂时没有使用的模块，这样包的体积过大，就会造成进入首页的时候需要加载的内容过多，出现长时间的白屏现象
  * 我们可以使用异步组件，让webpack打包的时候把异步组件进行分开打包，需要的时候再去加载这个组件
  * 异步组件的设置
    1. Vue 允许你以一个函数的方式定义组件，函数内部使用import方法引入某个模块
    2. import方法返回promise实例，当import引入成功则promise变成状态，import失败则返回失败的promise实例
    3. 定义组件的函数需要把import的返回值进行返回，让组件在渲染的时候能够知道渲染状态，及拿到引入的模块
    4. Vue 只有在这个组件需要被渲染的时候才会触发该函数，且会把结果缓存起来供未来重渲染
    5. wabpack在打包的时候，遇到import动态引入，则会把import动态引入的资源进行单独打包

17. 路由懒加载
  * 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
  * 结合 Vue 的异步组件 和 Webpack 的代码分割功能 ，轻松实现路由组件的懒加载
  * 路由懒加载：路由组件的异步加载（路由组件被单独打包,并且被需要的时候才去加载这个文件）

18. 动态路由
  * 我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染
  * 因为组件一样,但是组件内部要区分对应路由是哪个,所以我们可以在 路由路径中使用“动态路径参数”来达到这个效果
  * “动态路径参数”可以有query和params两种写法


19. 动态路由的---params传参
  * 可以在路由导航的时候在路由后添加params参数
  * 必须要在路由配置的path中去书写接受params参数的属性名,格式是`/:xxx/:xxx?`
  * 在组件中使用`$route.params`来接受params参数
  * 注意事项:
    + 如果在导航的时候使用location对象形式和params配合使用,则不能使用path导航
    + 可选的params参数不能是一个空串(要么书写一个null)

20. 动态路由的---query传参
  * 可以在路由导航的时候传递查询字符串参数
    + 1. 直接在路由字符串上拼接查询字符串即可
    + 2. 可以在to为location对象写法时候添加query属性为一个对象,对象内部就是query参数
  * 在路由组件中通过$route.query来拿到接受的query传参

21. 路由组件传参
  * 除了动态路由可以向组件内部传递params和query参数以外,我们也可以在路由表中使用props属性给某个特定的路由传递参数
  * props是一个对象:在组件内部就能通过props属性接受到props对象中传递的数据
  * props是布尔值为true:会把当前路由规则接受的params参数通过props的形式传递给组件内部
  * props是一个函数:当当前的路由规则被匹配的时候,props函数就会执行,props函数接受当前路由的$route作为参数,props函数的返回值对象中的属性 就是将来在组件内部能够通过props属性获取的值

  
22. 路由的元信息
  * 定义路由的时候可以配置 meta 字段
  * meta一般是一个对象,meta的数据其实就是路由的元信息(描述当前路由的一个固定信息)
  * 我们可以在组件内部通过 $route.meta得到元信息的内容
  * 我们可以在组件的外部 通过遍历 routes路由表,得到每一个组件的元信息

23. 路由导航守卫
  * 全局导航守卫
    + 全局前置守卫:router.beforeEach(),所有导航都会最先触发
    + 全局解析守卫:router.beforeResolve():在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用（了解）
    + 全局后置钩子：router.afterEach()导航已经全部完成，没有next参数
  * 路由独享守卫
    + 独享守卫：设置在路由表的规则对象中,beforeEnter(),针对某一个路由进行守卫
  * 组件内守卫
    + 组件内进入时守卫:beforeRouteEnter()刚刚进入当前组件,但是在渲染当前组件前就调用(当前没有this,可以在next中书写回调函数,回调函数的参数就是当前的组件实例)
    + 组件内更新时守卫:beforeRouteUpdate()在当前路由改变，但是该组件被复用时调用
    + 组件内离开时守卫:beforeRouteLeave()导航离开该组件的对应路由时调用
  * 守卫钩子函数的参数
    + to:即将要进入的目标 路由对象
    + from ：当前导航正要离开的路由
    + next: 一定要调用该方法,来确认守卫后导航下一步的行为(1.参数是空代表放行 2:参数是一个地址字符串,代表重新导航到该地址)

24. 完整的导航解析流程
  * 导航被触发。
  * 在失活的组件里调用 beforeRouteLeave 守卫。
  * 调用全局的 beforeEach 守卫。
  * 如果当前组件是重用组件则调用 beforeRouteUpdate 守卫 。
  * 如果当前组件是新进入组件,则在路由配置里调用 beforeEnter。
  * 解析异步路由组件。
  * 在被激活的组件里调用 beforeRouteEnter。
  * 调用全局的 beforeResolve 守卫 。
  * 导航被确认。
  * 调用全局的 afterEach 钩子。
  * 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

25. 监听动态路由的改变
  * 动态路由是组件已经复用了,但是传递的动态参数可能会发生变化,我们需要监听动态路由的改变
  * 使用组件内路由更新时守卫(beforeRouteUpdate):
    1. 这个守卫有限制,首先组件复用的时候路由的地址是不变,只有动态参数发生变化,这个时候守卫才会触发
    2. 守卫中直接获取$route的值,还是旧值,我们需要通过守卫钩子的参数to,拿到最新的$route
  * 使用watch监听$route
    1. 不需要深度监听,因为每次得到的都是一个新的$route对象
    2. 在watch的回调函数中拿到的就是最新的$route
  * 使用路由传参props拿数据,props是响应式更新的

## vue动画
1. Vue的过渡动画配置
  * 可以执行动画的前提是:
    1. 某个元素必须通过v-show或者v-if来控制
    2. 动画元素外层嵌套一个transition组件

  * 动画由类名来控制
    + .v-enter,.v-leave-to:控制动画的元素在进入时,和离开之后的样式
    + .v-leave,.v-enter-to:控制动画的元素在进入后和离开时的样式
    + .v-enter-active,.v-leave-active控制动画的元素在进入的过程中和移出的过程中的过渡动画效果

2. Vue命名动画
  * 正常来说当前页中所有的动画都受v-xxx控制,但是我们总是想动画有不同的效果
  * 我们可以在transition组件中命名当前动画名称,添加name属性
  * 在样式中以 我们的命名为开头书写动画 .name-xxx

3. Vue的关键帧动画
  * 我们可以在Vue的动画中直接使用关键帧
  * 其实这个关键帧的from和to就是过渡动画中的 动画开始时的状态和动画结束后的状态
  * 我们还要使用 v-leave-active和v-enter-active 进行关键帧动画的执行

4. Vue动画使用第三方库
  * 使用的是animate.css这个库 提供了非常多的关键帧名称
  * 使用方式
    1. 安装包 npm i animate.css
    2. 在入口文件中引入 animate.css
    3. 在需要动画的transition组件上添加两个属性 enter-active-class和leave-active-class,属性的值就是animate.css中的关键帧名称 格式是animate__fadeInDown
    4. 给被执行动画的元素上添加一个class:animate__animated

5. vue的路由使用动画
  * 和之前学习的动画是一致的
  * 使用transition组件包含住的是 router-view组件
  * 需要一点注意的是:切换的时候可能有两个组件同时显示,我们需要给隐藏的组件设置一个绝对定位不占用空间

## 数据响应式原理
1. 数据代理
  * 我们给Vue实例或者组件实例设置的data数据,默认被放在了实例对象的_data属性中了,我们想要操作这个数据的时候都需要添加_data
  * 为了更加方便的操作实例上的_data中的数据,我们可以把数据遍历在实例上放一份,但是其实操作实例上的数据,其实就是操作_data中对应的数据
  * 过程
    1. 遍历_data的数据
    2. 使用Object.defineProperty的方法给实例扩展一个同名的属性名
    3. 属性值使用getter和setter存取器属性
    4. 当读取属性的时候,使用getter方法,返回_data的属性值
    5. 当设置属性值的时候,使用setter方法,设置_data的属性值

2. 数据劫持
  * 目的:(收集)为了收集获取当前数据的模板的信息,(通知)为了通知收集的所有的模板进行更新数据
  * 原理:Object.defineProperty
  * 过程
    1. 遍历_data中的数据,得到属性和值
    2. 重写_data上的属性,并且书写为存取器数据
    3. 当取的时候直接返回当前属性的值,并收集当前的模板信息
    4. 当设置的时候修改当前属性的值,并通知所有的模板进行重新获取最新的值

3. 设计模式的观察者模式
  * 当一个对象A中的数据被多个对象所依赖
  * 并且当被依赖的对象发生改变的时候,会去通知所有的依赖项,我们就把这种模式称作为观察者模式
  * 其中被依赖的对象我们称作目标对象,依赖项我们称作为观察者

4. 设计模式的订阅与发布者模式
  * 订阅与发布者模式其实是属于观察者模式中的一个细分
  * 观察者模式中的观察者被称作为 订阅者,观察者模式中的目标对象被称作为发布者
  * 订阅者和发布者中间有一个统一的调度中心(订阅中心)来实现数据的通信, 并且订阅者和发布者都是不知道对方的存在的
  * 当订阅者订阅数据的时候,来到订阅中心,订阅中心收集所有的订阅者
  * 当发布者发布信息的时候,先传递给订阅中心,然后再由订阅中心统一传递给订阅者

5. Vue响应式数据原理总结(响应式原理,数据双向绑定原理)
  * 响应式数据原理的意思:当data中的数据被修改的时候视图会随之发生更新
  * 主要由3个方面构成
    + 数据代理
    + 数据劫持
    + 发布与订阅者模式
  * 详细过程
    1. 使用Object.defineProperty完成数据代理,把实例的_data上的数据在实例身上代理一份,我们访问或者设置vm上的数据的时候,其实就是访问或者设置vm._data中的数据
    2. 有一个Observer类(就是发布订阅者模式中的发布者),主要是通过Object.defineProperty给vm的_data上的数据所有层级的属性都重写为getter和setter存取器属性,在getter中建立了dep(订阅中心的实例化对象)和watcher(订阅者的实例化对象)的关系(简单来说就是让对应的dep收集依赖),让dep收集访问当前数据的watcher,在setter中通知所有的watcher进行重新获取数据(简单来说就是通知所有的当前数据的依赖更新)     
    3. 有一个Dep类(发布订阅模式中的订阅中心,中间人),Dep上有收集所有watcher的方法,和通知所有watcher重新获取数据的方法,数据中每一层需要劫持的属性对象在劫持的时候,会创建一个dep对象(Dep的实例化对象),在劫持的getter中调用dep的收集依赖的depend方法,在setter中调用dep的通知更新的notify方法
    4. 有一个Watcher类(发布订阅模式中的订阅者),Watcher身上有获取数据的get方法和更新视图的update方法,每一个组件都对应一个Wathcer,Watcher会在第一次获取数据的时候被dep收集到数组中,当dep收到更新要求的时候,dep就会通知所有的watcher实例调用update方法重新获取数据并更新视图