Vue2系列教程：如何实现组件的初始渲染过程？

本文共计4121个文字，预计阅读时间需要17分钟。

实现Vue.js的初始渲染过程，涉及内容包括：render helper、VNode、patch、初始渲染、指令、实例化子组件、插槽的处理、前置、上一篇文章、手写Vue2系列之编译器中完成从模板字符串到的转换。

实现 Vue.js 的初始渲染过程，涉及内容包括： render helper、VNode、patch 初始渲染、指令、实例化子组件、插槽的处理 前言

上一篇文章 手写 Vue2 系列 之 编译器 中完成了从模版字符串到 render 函数的工作。当我们得到 render 函数之后，接下来就该进入到真正的挂载阶段了：

挂载 -> 实例化渲染 Watcher -> 执行 updateComponent 方法 -> 执行 render 函数生成 VNode -> 执行 patch 进行首次渲染 -> 递归遍历 VNode 创建各个节点并处理节点上的普通属性和指令 -> 如果节点是自定义组件则创建组件实例 -> 进行组件的初始化、挂载 -> 最终所有 VNode 变成真实的 DOM 节点并替换掉页面上的模版内容 -> 完成初始渲染

目标

所以，本篇文章目标就是实现上面描述的整个过成，完成初始渲染。整个过程中涉及如下知识点：

• render helper

• VNode

• patch 初始渲染

• 指令(v-model、v-bind、v-on)的处理

• 实例化子组件

• 插槽的处理

实现

接下来就正式进入代码实现过程，一步步实现上述所有内容，完成页面的初始渲染。