44.VueJS学习-Vue2从初始化到更新完成的整个过程

 Vue 2 从初始化到更新完成的流水线表示：

1.创建Vue实例

• 用户创建一个 Vue 实例，传入配置选项，如数据、方法、生命周期钩子等。
• Vue 开始初始化实例，包括合并选项、设置实例属性等。

2.响应式数据处理

• 对实例中的 data 选项进行响应式处理。
• 使用 Object.defineProperty 遍历 data 中的每个属性，为其设置 getter 和 setter，建立依赖收集机制。

3.编译模版（如果有模版选项）

• 解析模板字符串，生成抽象语法树（AST）。
• 对 AST 进行优化，生成渲染函数。

4.挂载阶段

• 找到指定的 DOM 元素，准备将 Vue 实例挂载到该元素上。
• 调用渲染函数，生成初始的虚拟 DOM。
• 将虚拟 DOM 转换为真实 DOM，并插入到页面中。

5.依赖收集(首次渲染)

• 在渲染过程中，当读取响应式数据时，收集当前的渲染函数等作为该数据的依赖。

6.数据变化

• 用户通过某种方式改变了响应式数据，例如在方法中修改数据。

7.触发setter

• 响应式数据的 setter 被触发。

8.通知依赖更新

• Vue 遍历依赖列表，通知所有依赖该数据的地方进行更新。

9.重新渲染

• 再次调用渲染函数，生成新的虚拟 DOM。

10.Diff算法

• 使用 Diff 算法比较新旧虚拟 DOM，找出差异。

11.更新DOM

• 根据 Diff 算法的结果，对真实 DOM 进行最小化的更新操作。