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 的实现：

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

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

再组件的 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功能组件库，持续完善中...

虚拟节点。

在vue.js里，Vnode是一个类，能生成不同的vnode实例，不同类型的vnode表示不同类型的真实DOM元素。VNode全称是Virtual Node，是虚拟节点；组件和元素在Vue里表示出的都是一个个VNode。vnode是JavaScript对象版本的DOM元素，渲染视图的过程需要先建vnode，然后用vnode生成真实DOM元素，最后插入页面渲染视图。

首先 什么是虚拟节点？

        一般来说HTML的元素解析成DOM树后，真实挂载的元素就是Node。而VNode(虚拟节点)（本质是一个JS对象）是Vue解析template里面的元素生成的，而这些VNode组成就会形成一个VNodeTree（虚拟DOM），而虚拟DOM再经过一些 *** 作才会变成真实的DOM（不一定是一一对应的）。所以VNode可以做多平台的渲染。

那么 如果使用v-for列表渲染一个数组，那么有个添加 *** 作，在数组中间插入一个元素，那么插入渲染怎么才可以性能更好？

没有key就会调用patchUnKeyedChildren方法

        Vue源码会有c1保存着旧的VNode，c2保存着新的VNode，Vue内部就会先获取旧的和新的VNode数组（列表）的长度，再Math.min（c1.length,c2.length）获取新旧数组中长度最短的值，然后遍历短的VNode列表（为什么会判短的，因为要避免越界的情况），分别获取c2和c1里面的一个值，下一步就进行新旧VNode的patch（更新），相同的就不更新，不同的就更新（如果类型相同，但是里面的内容不同，就只更新里面的内容就可以），直到遍历完。因为用的是短的遍历，如果旧的VNode数大于新的VNode数，多出来的旧VNode就会被卸载（unmountChildren）掉，如果旧的VNode数小于新的VNode数，就会创建新的VNode, 然后挂载(mountChildren)到新的VNode列表里，形成新的虚拟DOM后，最后渲染到真实的DOM（而这种处理方法的性能低）。

本萌新理解：就是相同的VNode尽可能的复用，不同就复用VNode节点，再修改内容。

key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。

         如果使用key，就会使用patchUnkeyedChildren方法，这时vue就采用了diff算法。 当执行元素插进去数组中，vue会新生成一个新的VNodes并和原本的VNodes进行比较。（开发中，一般绑定key就是其代表内容的一致性）

        Vue考虑到中间插入删除 *** 作，就会先进行前面和后面的VNode比较，然后在中间就插入新的VNode，也考虑到随便在中间删了一个VNode。Vue内部用一个while循环（因为Vue不知道要在哪儿结束，VNode数量的不确定性）

        第一步，从头部开始遍历，找到新旧VNode数组（列表）里的第一个VNode，然后判断它们的type和key是否一样，如果VNode相同，就会进行patch，然后继续循环遍历，直到查找到不是新旧VNode就不同，才会跳出循环。

        第二步，开始从尾部开始进行遍历，判断它们的VNode是否相同，相同就patch，不同就直接跳出循环。

        第三步，如果旧VNode数组遍历完，新VNode数组还有VNode（新的VNode）,就会找到该VNode的位置，然后patch一个null(表示一次挂载 *** 作),新VNode列表就会在该位置新增一个VNode。

        第四步，如果新VNode数组遍历完，旧VNode数组里还有VNode,就找到对应位置的Vnode，直接卸载掉。

        第五步，如果前后都比较完后，新旧VNode数组中间部分的VNode数相等（或不等）并且无序，Vue会新建一个数组arr，会尽可能在旧VNode数组里找到对应新VNode数组的VNode，其实就是根据key建立索引找到它们相同的VNode，然后把旧VNode数组里含有的这个VNode放到arr里，直到相同的旧Vnode都patch完放到arr后，而这时如果旧VNode数组里还有多出来的VNode就会被卸载掉，而新VNode数组里还有多出来的VNode就会被放入arr里，最后再把arr插入到新的VNode中间。

---