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, vnode) 将 vnode 创建为 DOM 元素，并保存为 vnode.elm 变量。最后通过 insert 将当前创建的DOM元素插入父元素中。但这之前， 通过 createChildren 就是递归调用 createElm，让 children 中的 vnode 也经过相同的转换流程。可以想象，最终 template 中的根结点在插入 body 中时，其 DOM 元素已经是一个完整的 DOM 树了。

由于 createChildren 在 insert 函数之前执行，也就决定了子元素生命周期函数 mounted 先于父元素的 mounted 执行。同理也可推断子元素与父元素相同的其他生命周期函数的执行顺序。

总结

结合new Vue 发生了什么这篇文章，应该能够整体把握 vue 的数据驱动流程。这里所指数据驱动同前端领域大家谈到的数据驱动一样，就是数据与用户界面(DOM)的一种映射算法。有了这种映射算法，就不用去关心具体的DOM创建、修改、删除等操作，只需要关心业务逻辑带来的数据变化。

而了解DOM树如何被构建，就是要学习 vue 的数据驱动算法。下面以一张图来总结该算法的流程