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 进行最小化的更新操作。