Vue2 - 学习笔记

2022-07-17 199 阅读4分钟

Vue的基础知识

1. MVC 和 MVVM

区别
1. MVC: Model(模型)、View(视图)、Controller(控制器)
2. MVVM: Model(模型)、View(视图)、ViewModel。ViewModel是用来连接View和Model之间的桥梁。ViewModel负责把Model中的数据显示到页面上，当View发生变化时同步给Model。
MVVM的优势
MVVM解决了MVC中大量操作DOM元素，从而使页面渲染性能降低，加载速度慢，影响用户体验。Vue数据驱动，是通过数据来显示视图层，而不是通过操作DOM元素。MVVC的开发模式，会让开发者有更多的精力放在数据的变动上。

2. 生命周期

Vue实例从开始创建到销毁的过程，就是vue的生命周期，即从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新-渲染和卸载等一系列过程，称之为Vue的生命周期。

生命周期钩子
1. BeforeCreate: Vue实例刚被创建 (new Vue())。可以做loading动画。
2. created: Vue实例已被创建完成，此时可以拿到data、props、methods、computed等里的相关内容。但不可涉及虚拟dom和dom。 结束loading，发送数据请求，拿数据
3. beforeMount: 虚拟dom挂载完成(用来描述真实dom)，可以更改数据，但是不可以操作dom。
4. mounted: 可以进行任何操作。可对dom进行操作
5. beforeUpdate: 此时虚拟dom已经更新了，但是真实dom还没有更新，可以更改数据。
6. updated: dom已经更新了，在此处应该谨慎更改数据。。
7. beforeDestory: 实例vm未被销毁，可以消除内存泄漏的问题，如eventBus、store、定时器等。
8. destroyed: 实例被销毁。

3. 定向监听

watch 和 computed的异同

相同点
1. 都是基于Vue的依赖收集机制
2. 都有监听属性变化的功能。
不同点
1. 从性能上来说，computed是会自动diff依赖，若依赖没有发生变化，会自动从缓存中读取当前值
2. 从写法上来说，computed是一定有返回值的， watch不一定
3. 从执行时机上说，computed是从首次生成赋值的时候，就开始运算了，而watch首次是不会运行的，除非 immedate: true
4. 从入和出来说，computed是多入单出(即由多个变量组成，组成一个值的变化)，watch是单入多出(监听一个值的变化，从而影响一系列的状态变更)

4. 条件渲染

v-if & v-else-if & v-else || v-show

v-if 当结果为false的时候，是没有dom的，不会渲染实际节点。 v-show 只是通过display属性隐藏了而已，有dom，但不展示，且不占据位置。

5. 循环

v-for 和 v-if的优先级
1. vue2中，v-for的优先级大于 v-if，先循环再判断
2. vue3中，v-if的优先级大于 v-for。

key的作用

模板编译原理：将template(模板)传给vue实例，vue通过正则匹配vue语法，把template转换为AST(抽象语法树)，此时会区分静态值和动态变量，之后再将AST转化为可执行方法(render()),通过render()会生成dom

dom diff （区分前一次和后一次的变化中，哪些dom发生了变化）

    //变化之前
    1 2 3 4 5 6
    //变化之后
    6 5 7 3 2 1

层级: 只考虑单层复用，多层级遍历实现
顺序: 双向指针，从首尾向中间移动
替换：会先区分状态（区分是移动、新增、删除），优先复用，可以通过key判断当前这个节点是否可以复用 快速识别顺序
key的作用 - 尽可能复用节点

常见问题: index、随机数做key合不合适

不合适，虽然index和当前的循环结果唯一对应，但是如果不按顺序删除或者增添元素，那么更改后的index又会对应新的节点。

6. 指令

v-once 只执行一次
v-html / v-pre / v-text

v-model (双向绑定 - 绑定了value值以及监听了input事件)

    // 可以重新配置 - 即重新绑定值和事件
    model: {
        prop: 'seleced',
        event: 'change'
    }

v-bind

自定义组件

    directives: {
        // 自定义组件名字，里面是自己的生命周期的
        hello: {
            update: function(){
            }
        }
    }
    
    // 使用的时候 
    <div v-hello></div>

v-on （@ 绑定事件，可通过对象的方式绑定多个事件）
修饰符:
1. .stop(禁止事件冒泡)
2. .prevent(禁止默认事件的调用)
3. .capture
4. .once
5. .passive
6. .{keyAlias} - 按键修饰符

事件设计 - 为什么vue把事件写在模板上，而不是js中

更方便定位问题，事件定位事件触发源，触发源寻找触发时间逻辑。
更便于测试隔离，js与事件本身解耦。
更便于回收，viewModel销毁，自动解绑事件。