3. 阐述Vue的diff（patch）算法

当组件创建和更新时，vue均会执行内部的update函数，该函数在内部调用render函数生成虚拟dom树，组件会指向新树，然后vue将新旧两树进行对比，找到差异点，最终更新到真实dom对比差异的过程叫diff，vue在内部通过一个叫patch的函数完成该过程在对比时，vue采用深度优先、逐层比较的方式进行比对。

在判断两个节点是否相同时，vue是通过虚拟节点的key和tag来进行判断的

具体来说，首先对根节点进行对比，如果相同则将旧节点关联的真实dom的引用挂到新节点上，然后根据需要更新属性到真实dom，然后再对比其子节点数组;如果不相同，则按照新节点的信息递归创建所有真实dom，同时挂到对应虚拟节点上，然后移除掉旧的dom。

在对比其子节点数组时，vue对每个子节点数组使用了两个指针，分别指向头尾，然后不断向中间靠拢来进行对比，这样做的目的是尽量复用真实dom，尽量少的销毁和创建真实dom。如果发现相同，则进入和根节点一样的对比流程，如果发现不同，则移动真实dom到合适的位置

这样一直递归的遍历下去，直到整棵树完成对比。

diff的时机

当组件创建时，以及依赖的属性或数据变化时，会运行一个函数，该函数会做两件事：

• 运行_render生成一颗新的虚拟dom树（vnode tree）
• 运行_update，传入虚拟dom树的根节点，对新旧两棵树进行对比，最终完成对真实dom的更新

  function Vue() {
    // ...其他代码
    var updateComponent = () => {
      this._update(this._render())
    }
    new watcher(updateComponent)
    // ...其他代码
  }

diff就发生在_update函数的运行过程中

_update函数在干什么

_update函数接收到一个vnode参数，这就是新生成的虚拟dom树 同时，_update函数会通过当前组件的_vode属性拿到旧的虚拟dom树 _update函数首先会给组件的_vode属性重新赋值，让它指向新树

  // 以下为伪代码
  function _update(vnode) {
    // vode: 新树
    // this._vode: 旧
    var oldVnode = this._vode
    this._vode = vnode
    // 对比的目的： 更新真实DOM
    
    if(!oldVnode) {
      // el为根节点
      this._patch(this.$el, vnode)
    }

  }

然后会判断旧树是否存在：

• 不存在：说明是第一次加载组件，于是通过内部的patch函数，直接遍历新树，为每个节点生成真实DOM，然后挂载到每个节点的elm属性上（在树中记录真实DOM）
• 存在：说明之前已经渲染过组件，于是通过内部的patch函数，对新旧两棵树进行对比，以达到下面两个目标
  • 完成对真实DOM的最小化处理
  • 让新树的节点对应合适的真实DOM

patch函数

术语解释

• 相同：两个虚拟节点的标签类型、key值均相同，但input元素还要对比type属性
• 新建元素：是指根据一个虚拟节点提供的信息，创建一个真实DOM元素，同时挂载到虚拟节点的elm属性上
• 销毁元素：是指vnode.elm.remove()
• 更新：是指对两个虚拟节点对比更新，它仅发生在两个虚拟节点相同的情况下。
• 对比子节点： 是指对两个虚拟节点的子节点进行对比。

详细流程

1. 对比根节点

patch函数首先对根节点进行比较

如果两个节点：

• 相同，进入更新流程
  • 1. 将旧节点的真实DOM赋值到新节点：newVnode.elm = oldVnode.elm
  • 2. 对比新节点和旧节点的属性，有变化的更新到真实DOM中
  • 3. 当前两个节点处理完毕，开始对比子节点
• 不相同，进入创建流程
  • 新节点递归创建元素
  • 旧节点销毁元素

2. 对比子节点

在对比子节点中，vue的原则是：

• 尽量不要有操作
• 不行的话，尽量改动元素属性
• 还不行的话，尽量移动元素，而不是删除和创建元素
• 还不行的话，删除和创建元素

对开发的影响

v-for循环时候加上key值

如果不加上key值，当v-for循环的数组发生变化需要重新渲染时，vue就会认为前后节点相同，而去频繁的对比子节点，修改内容，容易造成页面卡顿。 如果加上key值，vue就会进入创建流程