Vue原理解析（五）：彻底搞懂虚拟Dom到真实Dom的生成过程

再有一棵树形结构的 JavaScript 对象后，我们现在需要做的就是将这棵树跟真实的 Dom 树形成映射关系，首先简单回顾之前遇到的 mountComponent 方法：

我们已经执行完了 vm_render 方法拿到了 VNode ，现在将它作为参数传给 vm_update 方法并执行。 vm_update 这个方法的作用就是就是将 VNode 转为真实的 Dom ，不过它有两个执行的时机：

我们现在先来看下 vm_update 方法的定义：

这里的 vm$el 是之前在 mountComponent 方法内就挂载的，一个真实 Dom 元素。首次渲染会传入 vm$el 以及得到的 VNode ，所以看下 vm__patch__ 定义：

__patch__ 是 createPatchFunction 方法内部返回的一个方法，它接受一个对象：

nodeOps 属性：封装了 *** 作原生 Dom 的一些方法的集合，如创建、插入、移除这些，再使用到的地方再详解。

modules 属性：创建真实 Dom 也需要生成它的如 class / attrs / style 等属性。 modules 是一个数组集合，数组的每一项都是这些属性对应的钩子方法，这些属性的创建、更新、销毁等都有对应钩子方法，当某一时刻需要做某件事，执行对应的钩子即可。比如它们都有 create 这个钩子方法，如将这些 create 钩子收集到一个数组内，需要在真实 Dom 上创建这些属性时，依次执行数组的每一项，也就是依次创建了它们。

这里大家记住一句话即可，无论 VNode 是什么类型的节点，只有三种类型的节点会被创建并插入到的 Dom 中：元素节点、注释节点、和文本节点。

我们接着来看下 createPatchFunction 它究竟返回一个什么样的方法：

首次渲染时没有 oldVnode ， oldVnode 就是 $el ，一个真实的 dom ，经过 emptyNodeAt(oldVnode) 方法包装：

再将传入的 $el 属性转为了 VNode 格式之后，我们继续：

createElm 方法开始生成真实的 Dom ， VNode 生成真实的 Dom 的方式还是分为元素节点和组件两种方式，所以我们使用上一章生成的 VNode 分别说明。

大家可以先看下这个流程图有一个印象即可，接下来再看具体实现时相信思路会清晰很多：

开始创建 Dom ，我们来看下它的定义：

依次判断是否是元素节点、注释节点、文本节点，分别创建它们然后插入到父节点里面，这里主要介绍创建元素节点，另外两个并没有复杂的逻辑。我们来看下 createChild 方法定义：

开始创建子节点，遍历 VNode 的每一项，每一项还是使用之前的 createElm 方法创建 Dom 。如果某一项又是数组，继续调用 createChild 创建某一项的子节点；如果某一项不是数组，创建文本节点并将它添加到父节点内。像这样使用递归的形式将嵌套的 VNode 全部创建为真实的 Dom 。

再看一遍流程图，相信大家疑惑已经减少很多：

首先还是看张简易流程图，留个印象即可，方便理清之后的逻辑顺序：

执行 createComponent 方法，如果是元素节点不会返回任何东西，所以是 undefined ，会继续走接下来的创建元素节点的逻辑。现在是组件，我们看下 createComponent 的实现：

首先会将组件的 vnodedata 赋值给 i ，是否有这个属性就能判断是否是组件 vnode 。之后的 if(isDef(i = ihook) && isDef(i = iinit)) 集判断和赋值为一体， if 内的 i(vnode) 就是执行的组件 init(vnode) 方法。这个时候我们来看下组件的 init 钩子方法做了什么：

activeInstance 是一个全局的变量，再 update 方法内赋值为当前实例，再当前实例做 __patch__ 的过程中作为子组件的父实例传入，在子组件的 initLifecycle 时构建组件关系。将 createComponentInstanceForVnode 执行的结果赋值给了 vnodecomponentInstance ，所以看下它的返回的结果是什么：

再组件的 init 方法内首先执行 createComponentInstanceForVnode 方法，这个方法的内部就会将子组件的构造函数实例化，因为子组件的构造函数继承了基类 Vue 的所有能力，这个时候相当于执行 new Vue({}) ，接下来又会执行 _init 方法进行一系列的子组件的初始化逻辑，我们回到 _init 方法内，因为它们之间还是有些不同的地方：

前面都还执行的好好的，最后却因为没有 el 属性，所以没有挂载， createComponentInstanceForVnode 方法执行完毕。这个时候我们回到组件的 init 方法，补全剩下的逻辑：

我们在 init 方法内手动挂载这个组件，接着又会执行组件的 _render() 方法得到组件内元素节点 VNode ，然后执行 vm_update() ，执行组件的 __patch__ 方法，因为 $mount 方法传入的是 undefined ， oldVnode 也是 undefined ，会执行 __patch__ 内的这段逻辑：

这次执行 createElm 时没有传入第三个参数父节点的，那组件创建好的 Dom 放哪生效了？没有父节点也要生成 Dom 不是，这个时候执行的是组件的 __patch__ ，所以参数 vnode 就是组件内元素节点的 vnode 了：

很明显这个时候不是组件了，即使是组件也没关系，大不了还是执行一遍 createComponent 创建组件的逻辑，因为总会有组件是由元素节点组成的。这个时候我们执行一遍创建元素节点的逻辑，因为没有第三个参数父节点，所以组件的 Dom 虽然创建好了，并不会在这里插入。请注意这个时候组件的 init 已经完成，但是组件的 createComponent 方法并没有完成，我们补全它的逻辑：

无论是嵌套多么深的组件，遇到组件的后就执行 init ，在 init 的 __patch__ 过程中又遇到嵌套组件，那就再执行嵌套组件的 init ，嵌套组件完成 __patch__ 后将真实的 Dom 插入到它的父节点内，接着执行完外层组件的 __patch__ 又插入到它的父节点内，最后插入到 body 内，完成嵌套组件的创建过程，总之还是一个由里及外的过程。

再回过头来看这张图，相信会好理解很多~

接下来会将 updateComponent 传入到一个 Watcher 的类中，这个类是干嘛的，我们下一章再说明，接下来执行 mounted 钩子方法。至此 new Vue 的整个流程就全部走完了。我们回顾下从 new Vue 开始它的执行顺序：

最后我们还是以一道 vue 可能会被问到的面试题作为本章的结束吧~

顺手点个赞或关注呗，找起来也方便~

你可能会用的上的一个vue功能组件库，持续完善中

       Virtual DOM这个概念相信大家不会太陌生，他产生的前提是浏览器中的DOM是很“昂贵”的，为了直观的感受，我们可以把一个简单的 div 元素属性都打印出来，如下图所示：

       可以看到Vuejs中的Virtual DOM还是稍微有点复杂的。因为他这里包含了很多Vuejs的特性。这里千万不要被这茫茫多的属性吓到，实际上Vuejs中Virtual DOM是借鉴了一个开源库 snabbdom 的实现，然后加入了一些Vuejs特色的东西。

       其实VNode是对真实DOM的一种抽象描述，它的核心定义为非就几个关键属性，标签名，数据，子节点，键值等，其他属性都是用来扩展VNode的灵活性以及实现一些特殊的 feature 的。由于VNode只是用来用来映射到真实DOM的渲染，不需要包含 *** 作DOM的方法，因此它就非常轻量和简单。

       Virtual DOM除了它的数据结构的定义，映射到真实的DOM实际上要经历VNode的 create、diff 、patch 等过程。

       下面是vuejs从初始化到最终渲染的整个过程。假如你想阅读Vue源码，这张图应该能够帮到你。

当页面渲染的时候Vue会创建一颗虚拟DOM树

当页面发生改变Vue会再创建一颗新的虚拟DOM树

前后两颗新旧虚拟DOM树进行对比，Vue通过diff算法，去记录差异的地方

将有差异的地方更新到真实的DOM树中

vue中的虚拟DOM树只会重新渲染页面修改的地方，大大减少了对真实DOM树的 *** 作。 -------虚拟DOM树是占内容的，但是可以帮我们提高DOM的性能。

可以这样理解，虚拟DOM树占空间，，，虚拟DOM树可以提高DOM效率，，节省时间。

vue不直接 *** 作真实的DOM树，通过虚拟DOM树就可以重新渲染修改的地方，重要的支撑就是 diff 算法。

key的作用是为了高效的更新虚拟DOM树，提高查找的效率，可以快速的查找到要修改的元素

虚拟DOM（Virtual DOM）它是使用javaScript对象来描述真实DOM，虚拟DOM的本质就是javaScript对象，使用javaScript对象来描述DOM的结构，程序的各种状态变化首先作用于虚拟DOM，最终映射到真实DOM上，像Vue这样的MVVM框架会帮助我们屏蔽DOM的 *** 作；

以上就是关于Vue原理解析（五）：彻底搞懂虚拟Dom到真实Dom的生成过程全部的内容，包括:Vue原理解析（五）：彻底搞懂虚拟Dom到真实Dom的生成过程、基于Vue认识虚拟DOM（Virtual DOM）、vue 中的虚拟dom树等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！