代码编辑不够友好,为更好一点的阅读体验,还是推荐原文链接:https://www.yuque.com/longtengsong/blog/bu09tk
DOM 树是 vue 在构建实例的时候,通过 $mount 函数创建出来的。那么 DOM 创建过程是怎样的呢?
步骤一:执行 render 函数
$mount 函数执行时,实际调用的是: vm._update(vm._render(), hydrating) 。
从上图中可以看到,模版被编译为一个render函数,render 函数执行最终目的就是将 template 转换为 vnode 。
步骤二:执行 update 函数
从 _update 源码可以看出,如果初次渲染,即 initial render,则走 vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */) 这个分枝,而 vm.$el = vm.__patch__(prevVnode, vnode) 则是组件更新时执行的分枝。这里我们先专注于初次渲染的分枝。
通过 Vue.prototype.__patch__ 函数定义,层层查找,最终 patch 进入我们视野,通过分析 createElm 便是DOM 创建的关键函数。
注意,我们目前仅仅探究 vue 构建 DOM 的流程,因此仅作最简单的考虑,上述代码过滤了组件渲染,跨平台、警告信息等非关键代码。
很明显, nodeOps.createElement(tag, vnod