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 的数据驱动算法。下面以一张图来总结该算法的流程

你可能感兴趣的:(vue,如何生成一个dom元素)