vue 虚拟dom和diff算法详解

虚拟dom是当前前端最流行的两个框架（vue和react）都用到的一种技术，都说他能帮助vue和react提升渲染性能，提升用户体验。那么今天我们来详细看看虚拟dom到底是个什么鬼

虚拟dom的定义与作用

• 什么是虚拟dom

大家一定要记住的一点就是，虚拟dom就是一个普通的js对象。是一个用来描述真实dom结构的js对象，因为他不是真实dom，所以才叫虚拟dom。

• 虚拟dom的结构
  从下图中，我们来看一看虚拟dom结构到底是怎样的
  
  如上图，这就是虚拟dom的结构，他是一个对象，下面有6个属性，sel表示当前节点标签名，data内是节点的属性，elm表示当前虚拟节点对应的真实节点（这里暂时没有），text表示当前节点下的文本，children表示当前节点下的其他标签
  
• 虚拟dom的作用

1、我们都知道，传统dom数据发送变化的时候，我们都需要不断的去操作dom，才能更新dom的数据，虽然后面出现了模板引擎这种东西，可以让我们一次性去更新多个dom。但模板引擎依旧没有一种可以追踪状态的机制，当引擎内某个数据发生变化时，他依然要操作dom去重新渲染整个引擎。
而虚拟dom可以很好的跟踪当前dom状态，因为他会根据当前数据生成一个描述当前dom结构的虚拟dom，然后数据发送变化时，又会生成一个新的虚拟dom，而这两个虚拟dom恰恰保存了变化前后的状态。然后通过diff算法，计算出两个前后两个虚拟dom之间的差异，得出一个更新的最优方法（哪些发生改变，就更新哪些）。可以很明显的提升渲染效率以及用户体验
2、因为虚拟dom是一个普通的javascript对象，故他不单单只能允许在浏览器端，渲染出来的虚拟dom可同时在node环境下或者weex的app环境下允许。有很好的跨端性

什么是diff算法

diff算法就是用于比较新旧两个虚拟dom之间差异的一种算法。具体详情，后面我们会说

vue中的虚拟dom

目前虚拟dom的类库有多种，常见的有snabbdom和virtual-dom， vue以前用的是virtual-dom，从2.x版本后都是使用的snabbdom。(snabbdom源码下载) 今天，我们就通过snabbdom源码来解析vue的虚拟dom
首先我们看下snabbdom源码结构。

要搞清楚vue虚拟dom，我们就需要搞清楚几个核心的方法

• h函数
• patch函数
• patchVnode函数
• updateChildren函数

这几个核心函数的源码，看着可能会比较累，我就不一一对源码做详细的介绍，我主要会介绍每个函数主要做了什么事情，然后后面再附上源码，会加点注释，看的懂得可以详细看看

h函数

h函数，看着是不是很眼熟？ 他是在vue的什么阶段去调用的？

眼熟吧，是不是在这地方看过啊。没错，h函数就是在render函数内运行的。我们在前面vue生命周期的文章中就提过，vue在created–>beforeMount之间的时候会将模板编译成render函数，其实就是将模板编译成某种格式放在render函数内，然后当render函数运行得时候，就会生成虚拟dom。那么编译成什么格式呢。就是编译成h函数所认可的格式。那么我们来看看h函数需要什么格式

有的人可能会说，唉，这个h函数怎么定义了多个啊。没错，h函数是使用函数重载的方式定义的，那么什么是函数重载

函数重载

函数重载就是定义多个重名函数，利用函数的参数个数以及参数类型来区分。当参数个数不同，参数类型不同时，函数内执行的代码也会相应不同。
下面，我们就来看下最典型得一种，也就是图中得第四种。

• 第一个参数sel 表示dom选择器，如： div#app.wrap ==》

• 第二个参数表示dom属性，是个对象如：{ class: ‘ipt’, value: ‘今天天气很好’ }

• 第三个参数表示子节点，子节点也可以是一个子虚拟节点，也可以是文本节点

  const vdom = h(‘div’, { class: ‘vdom’}, [
  h(‘p’, { class: ‘text’}, [‘hello word’]),
  h(‘input’, { class: ‘ipt’, value: ‘今天星期二’ })
  ]) // 模板就是会编译成这种格式
  console.log(vdom)

而h函数内最主要得就是执行了 vnode函数，vnode函数得主要作用就是将h函数传进来得参数转行为了js对象（即虚拟dom）

而vnode函数，我就不多说了，没几句代码，也很简单，反正就是执行了生成js对象（虚拟dom）的代码。直接上图

看到现在，我们心里应该要清楚虚拟dom是怎么生成的，什么时候生成的。如果不清楚，那么请往上滑，再看一遍，哈哈。下面我们总结下虚拟dom生成的过程。

• 首先࿰