vue2 原理浅析【基础概总】

1.数据驱动

vue.js 一个核心思想是数据驱动。数据驱动：是指视图由数据驱动生成的，对视图的修改不会直接操作 dom，而是通过修改数据。

2.虚拟 dom (Tag、props、children)

抽象描述标签名，数据，子节点，键值等；只是映射到真实 dom 渲染，不包含操作 dom 的方法。

3.vue 响应式

• vue2 是使用 Object.defineProperty 结合订阅/发布者模式实现响应式 observe、dep、watcher=>path
• vue3 是使用 RefImpl 类实现响应式

4.vue 双向绑定

一般是指页面上受控组件输入的值同步更新到 data 属性，以及更新 data 当中对应的属性也会更新控件的值。

• v-bind 绑定 value 属性的值；

• v-on 绑定 input 事件监听到函数中，函数会获取最新的值赋值到绑定的属性中；

5.vue 生命周期钩子函数

1. new Vue 实例化阶段开始
2. 设置基础属性(uid，Vue 组件标识，自身引用);合并 options 配置项;initLifecycle 定义当前实例父、子组件实例属性；initEvents 注册实例的_events，并判断是否有生命周期函数监听;initRender 定义组件实例渲染相关
3. beforeCreate 钩子函数
4. 处理初始化注入数据(provide、inject);initState 处理数据、方法、监听（数据响应式绑定） ;initProvide 这里就是处理该组件的下级组件注入数据，如果是函数的话则会重新将内部的 this 指向当前实例
5. created 钩子函数 实例化阶段完成
6. Beforemount 钩子函数 页面内容还是模板字符占位
7. 调用渲染函数
8. mounted 钩子函数 data 数据被挂载到 dom 节点
9. Beforeupdate 钩子函数 数据是新的，界面是旧的
10. updated 钩子函数 数据是新的，界面是新的
11. BeforeDestroy data、methods 可以用，释放内存
12. destroyed 组件销毁
13. other Activated deactived（组件缓存激活）

6.diff 算法

在第一次渲染 dom 时会直接跳过此算法，主要是在 dom 更新的时候计算新、旧虚拟 dom 之间的差异性，以最小代价操作 dom，其本质也是通过 document 操作 dom 树。此算法一般发生在v-for 循环、v-if/else、component这类动态生成的节点对象上

• vue2+使用的 diff 算法：双端对比【① 新头和旧头相等 ② 新尾和旧尾相等 ③ 新头和旧尾相等 ④ 新尾和旧头相等 ⑤ 互不相等】
• vue3 使用的 diff 算法：最长递增子序列【① 新头和旧头相等 ② 新尾和旧尾相等 ③ 基于最长递增子序列进行移动/添加/删除】

粗体