用 Vue 源码窥探初次渲染及组件的生命周期
2024-01-31 01:50:06
Vue.js 作为前端领域广受欢迎的框架，以其简单易学、功能强大的特点，吸引了大批开发者的青睐。为了深入了解 Vue 的内部运作机制，本文将通过分析 Vue 源码，探究 Vue 初次渲染的过程，揭示组件的渲染过程和 mounted 生命周期执行顺序，帮助你从源码的角度理解 Vue 的工作原理。
初次渲染过程分析
1. 创建根实例
当 Vue 应用启动时，首先会创建一个根实例（Root Instance），这个实例是整个 Vue 应用的入口。根实例的创建过程如下：
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
其中，el 属性指定了根元素的 id，data 属性定义了初始数据。当根实例创建完成后，Vue 将开始初次渲染过程。
2. 编译模板
Vue 使用模板语法来定义组件的视图，在初次渲染过程中，Vue 会对模板进行编译。编译的过程主要包括两部分：
- 将模板解析成抽象语法树（AST）。
- 将 AST 转换成渲染函数（Render Function）。
渲染函数是一个纯 JavaScript 函数，它接受组件的数据和 props 作为参数，并返回一个虚拟 DOM（Virtual DOM）对象。
3. 创建虚拟 DOM
虚拟 DOM 是一个轻量级的 DOM 表示，它记录了组件的结构和状态。Vue 使用虚拟 DOM 来表示组件的视图，并在需要更新视图时，只更新发生变化的部分。
4. 挂载虚拟 DOM
当虚拟 DOM 创建完成后，Vue 会将其挂载到真实的 DOM 中。挂载的过程主要包括两部分：
- 将虚拟 DOM 转换成实际的 DOM 节点。
- 将实际的 DOM 节点插入到指定的根元素中。
5. 执行生命周期钩子函数
在初次渲染过程中，Vue 会执行 mounted 生命周期钩子函数。mounted 钩子函数在组件首次挂载到真实 DOM 中时被调用，它通常用于执行一些初始化操作。
组件的渲染过程
Vue 组件的渲染过程与初次渲染过程类似，主要包括以下步骤：
- 编译模板。
- 创建虚拟 DOM。
- 挂载虚拟 DOM。
- 执行生命周期钩子函数。
需要注意的是，组件的渲染过程可能还会触发子组件的渲染过程。这是因为组件可以嵌套使用，当一个组件发生变化时，它的子组件也可能需要更新。
mounted 生命周期执行顺序
mounted 生命周期钩子函数在组件首次挂载到真实 DOM 中时被调用，它的执行顺序如下：
- beforeMount 钩子函数被调用。
- 组件的模板被编译。
- 虚拟 DOM 被创建。
- 虚拟 DOM 被挂载到真实的 DOM 中。
- afterMount 钩子函数被调用。
需要强调的是，mounted 钩子函数只能在组件首次挂载到真实 DOM 中时被调用，当组件更新时，mounted 钩子函数不会被再次调用。
总结
通过分析 Vue 源码，我们深入探究了 Vue 初次渲染的过程，揭示了组件的渲染过程和 mounted 生命周期执行顺序。这些知识有助于我们理解 Vue 内部运作机制，并编写出更健壮、更易维护的 Vue 应用。
