vue 如何生成一个dom元素_vue 学习心得——DOM树如何被构建

代码编辑不够友好，为更好一点的阅读体验，还是推荐原文链接：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