Vue2.0+Vue3.0复习

持续更新思维导图：

最近开始复习vue，在某b站看到一个不错视频，跟着撸一遍。

链接：001_尚硅谷Vue技术_课程简介_哔哩哔哩_bilibili

以下是学习记录笔记和相关代码：

代码仓库链接：https://github.com/xiaoli0510/vue

20221124：P1-P7：

初识Vue:    
    1.想让Vue工作，必须创建一个Vue实例，且要传入一个配置对象；
    2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
    3.root容器里的代码被称为【Vue模板】；
    4.Vue实例和容器是一一对应的；
    5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
    6.{{xx}}中的xx要写js表达式，且xx可以自动读取到data中的所有属性；
    7.一旦data中的数据发生改变，那么模板中用到的数据的地方也会自动更新；

    js表达式和js代码(语句)：
    1.表达式：一个表达式会产生一个值，可以放在任何一个需要值得地方；
        (1).a
        (2).a+b
        (3).demo(1)
        (4).x===y?'a':'b'

    2.js代码(语句)
        (1).if(){}
        (2).for(){}

模板语法:
    Vue模板语法有2大类：
    1.插值语法：
      功能：用于解析标签体内容；
      写法：{{xx}}，xx是js表达式，且可以直接读取到data中的所有属性；
    2.指令语法：
      功能：用于解析标签(包括:标签属性、标签体内容、绑定事件...);
      举例：v-bind:href="xx"可简写成:href="xx"，xx是js表达式,且可以直接读取到data中的所有属性；

20221124：P8-P9：

 Vue中有2种数据绑定的方式：
     1.单向绑定(v-bind):数据只能从data流向页面。
     2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
          备注：
            1.双向绑定一般都应用在表单类元素上(如input、select等)。
            2.v-model:value可以简写为v-model,因为v-model默认收集的就是value值。

 el与data的两种写法 
    1.el有2种写法
      (1).new Vue时配置el属性。
      (2).先创建Vue实例，随后再通过vm.$mount('#root')制定el的值。
    2.data有2种写法
      (1)对象式。
      (2)函数式。
      目前用两种都可以，后续使用组件时，需使用函数式，否则会报错
    3.一个重要的原则
      由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再指向Vue实例。

20230504：P10：

  MVVM模型：
        1.M:模型(Model):data中的数据；
        2.V:视图(View):模板代码；
        3.MV:视图模型(ViewModel):Vue实例；
        
  vue中的MVVM特点：
        1.data中的所有属性，最后都出现在vm身上;
        2.vm身上所有的属性，及Vue原型上所有属性，在Vue模板中都可以直接使用；

20230504：P11-P13：

 Object.defineProperty：
           1.value:设置值；
           2.enumerable:控制属性是否可枚举，默认是false；
           3.writable:控制属性是否可改，默认是false；
           4.configurable:控制属性是否可删除，默认是false；
           5.get:getter:当读取xx属性时，会触发；
           6.set:getter:当修改xx属性时，会触发；

数据代理：通过一个对象代理对另外一个对象中属性的读写操作

数据代理
        1.Vue中的数据代理：
        通过vm对象来代理data对象中所有属性的读写操作；
        2.优点：
        方便操作data中的数据；
        3.基本原理：
          通过Object.defineProperty将data中的属性添加到vm上；
          为每个添加到vm上的属性，都指定一个getter/setter;
          在getter/setter内部去操作data中对应的属性；

20230504：P14-P16：

 事件的基本使用：
        1.使用v-on:xxx或者@xxx绑定事件，xxx是事件名字；
        2.事件的回调需配置在methods对象中，最终会在vm上；
        3.methods中配置的函数，不要用箭头函数，否则this指向window;
        4.methods中配置的函数，都是Vue所管理的函数，this的指向是vm或组件实例对象；
        5.@click="demo"和@click="demo(event)"效果一致，但后者可传参；

事件修饰符：
        1.prevent:阻止默认事件
        2.stop:阻止事件冒泡
        3.once:事件只触发一次
        4.capture:使用事件的捕获模式；
        5.self:只有event.target是当前操作的元素时才触发；
        6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕；在wheel事件中使用，或者移动端使用。

键盘事件
        1.Vue中常用的按钮别名：
            回车：enter;
            删除：delete;
            退出：esc
            空格：space
            换行：tab
            上：up
            下：down
            左：left
            右：right
        2.Vue未提供别名的按键，可使用按键原始值去绑定，需使用caps-lock命名；
        3.系统修饰符(用法特殊):ctrl、alt、shift、meta；
          a.配合keyup使用：按下修饰符的同时，再按下其它键，随后释放其它键，事件才被触发。
          b.配合keydown使用：正常触发事件。
        4.使用keyCode去指定具体的按键(不推荐)；
        5.Vue.config.keyCodes自定义键名=键码，自定义按键别名；

20230505：P21-P24：

 计算属性：
    1.定义：要用的属性不存在，需要通过已有属性计算得来；
    2.原理：Object.defineProperty提供的getter/setter；
    3.get函数什么时候执行：
      a:初次读取时会执行一次；
      b:当依赖的数据发生改变时会再次执行；
    4.优点：内部有缓存机制，能复用，效率更高，调试方便；
    5.备注：
      a:计算属性最终会出现在vm上，直接读取使用即可，不用在后面添加()；
      b:如果计算属性要被修改，需要写set函数，且set中要修改计算时所依赖的属性；


 计算属性两种写法：
       1.配置对象，get和set函数；
       2.不需setter函数时，简写成函数；

20230505：P18-P25：

监视属性：可监视data里面或者computed里面的属性；

监视属性两种写法：
1.watch方法;
2.vm.$watch方法;

监视属性简写：
1.不需配置immediate和deep属性时，可简写；
2.回调函数不要用箭头函数，箭头函数里面的this指向window;

watch和computed区别：
1.computed能完成的功能，watch都可以完成；
2.watch能完成的功能，computed不一定能完成。因为watch里面能处理异步，computed里面不能处理异步；

 两个重要的小原则：
 1.Vue管理的函数，不要写箭头函数，这样this指向vm或组件实例对象;
 2.不被Vue管理的函数(定时器的回调函数、ajax的回调函数、Promise的回调函数)，最好写箭头函数，这样this指向vm或组件实例对象；

20230531：P26：

 绑定样式的三种方式：
       1.字符串写法,适用于：样式的类名不确定，需要动态指定
       2.数组写法,适用于：要绑定的样式个数不确定、名字也不确定
       3.对象写法,适用于：要绑定的样式个数不确定、名字也不确定，且需要动态指定