vue2 diff算法及虚拟DOM

Posted 奥特曼 

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2 diff算法及虚拟DOM相关的知识,希望对你有一定的参考价值。

目录

一、虚拟DOM

(1) 什么是虚拟DOM?

(2)为什么要有虚拟DOM

二、snabbdom

(1)h( )函数

(2)createElement( )函数

(3)patch( )函数

(4)patchVnode( )函数

(5)updateChild( )函数


概括:diff算法,虚拟DOM中采用的算法,把树形结构按照层级分解,只比较同级元素,不同层级的节点只有创建和删除操作。

一、虚拟DOM

(1) 什么是虚拟DOM?

虚拟 DOM (Virtual DOM,简称 VDOM) 是一种编程概念,意为将目标所需的 UI 通过数据结构“虚拟”地表示出来,保存在内存中,然后将真实的 DOM 与之保持同步。这个概念是由 React 率先开拓,随后在许多不同的框架中都有不同的实现,当然也包括 Vue。

虚拟DOM本质上就是用来描述真实DOM的javascript对象。

举例:

    <div id="hello">我是奥特曼</div>

编译成虚拟DOM

const vnode = 
  type: 'div',
  props: 
    id: 'hello'
  ,
  children: [
    /* 更多 vnode */
  ],
  text:'我是奥特曼'

(2)为什么要有虚拟DOM

1.能够减少操作真实DOM,对于浏览器而言有很大的性能提升,对于开发而言有很大的工作效率(同时避免了代码繁琐)。

2.想要修改数据 直接修改js对象即可,当然我们基于框架去开发也不用关心数据如何去更新视图。

3.例如新节点中,只有一部分节点进行变动时,只需要更新要变更的一部分,另一部分完全可以使用之前的节点。也避免了全部更新渲染。

最终目的:新虚拟DOM和旧虚拟DOM 进行diff计算,(精细化比较),算出应该如何最小量更新,最后反应到真正的DOM上。

二、snabbdom

在vue2中diff算法借鉴了snabbdom库,这个库也就包含着如何生成虚拟DOM和diff算法。

方法包括:

h( ) 函数用来生成虚拟DOM

vnode( ) 函数 通过h调用vnode 达到返回虚拟DOM的格式

patch( ) 函数用来比较新旧节点是否是一个节点,如果不是进行暴力更新,如果是进行对比

patchVnode( ) 函数用来详细对比 当遇见新旧节点都是数组时调用updataChildren

updataChildren( ) 函数用来对比新旧节点都是数组的情况

createElement( ) 讲虚拟dom创建出真实dom

以下函数均为简单版实现核心  并为源码 

(1)h( )函数

h函数的使用方式:

import  h  from 'vue'

// 除了 type 外,其他参数都是可选的
h('div')
h('div',  id: 'foo' )

// attribute 和 property 都可以用于 prop
// Vue 会自动选择正确的方式来分配它
h('div',  class: 'bar', innerhtml: 'hello' )

// class 与 style 可以像在模板中一样
// 用数组或对象的形式书写
h('div',  class: [foo,  bar ], style:  color: 'red'  )

// 事件监听器应以 onXxx 的形式书写
h('div',  onClick: () =>  )

// children 可以是一个字符串
h('div',  id: 'foo' , 'hello')

// 没有 prop 时可以省略不写
h('div', 'hello')
h('div', [h('span', 'hello')])

// children 数组可以同时包含 vnode 和字符串
h('div', ['hello', h('span', 'hello')])

 当然传参的方式有很多,最普通的写法

 h(a,,'文字')

当然第二个就可以去表示是参数的一些属性,当没有属性的时候你也可以不传,或者第二个参数可以传子集元素的集合等,  snabbdom就是在这方面做了很多个判断。

 h(a,'文字')

实现一个简单的h函数

当然如果你想了解的更透彻可以 clone snabbdom库的代码进行查看。

git clone https://github.com/snabbdom/snabbdom.git

由于snabbdom传参形式较多, 这里就实现一个简单的h函数,只实现三种场景

  ① h('div', , '文字')
  ② h('div', , [h()])
  ③ h('div', , h())

vnode( ) 函数

export default function vnode(sel, data, children, text, elm) 
  const key = data == undefined ? undefined : data.key;
  return  sel, data, children, text, elm, key ;

vnode就是把传进来的参数以对象的形式返回出去,返回出一个vnode的形式

sel: 元素/标签

data:属性

children:子元素vnode的集合

text:文字

elm:节点

h( )函数

import vnode from "./vnode";
/**
 * 产生虚拟DOM树 返回的是一个对象
 * 低配版本的h函数,这个函数必须接受三个参数,缺一不可
 * @param * sel
 * @param * data
 * @param * c
 * 调用只有三种形态
 * ① h('div', , '文字')
 * ② h('div', , [h()])
 * ③ h('div', , h())
 */
export default function (sel, data, c) 
  // 检查参数个数
  if (arguments.length !== 3) 
    throw new Error("请传入只三个参数!");
  
  // 检查参数c的类型
  if (typeof c === "string" || typeof c === "number") 
    // 说明现在是 ① h('div', , '文字')
    return vnode(sel, data, undefined, c, undefined);
   else if (Array.isArray(c)) 
    // 说明是 ② h('div', , [])
    let children = [];
    // 遍历 数组 c
    for (let item of c) 
      // 如果是数组传入的项一定有sel属性 也就必须是h函数的格式 不考虑数组中有包含文字的情况
      if (!(typeof item === "object" && item.hasOwnProperty("sel"))) 
        throw new Error("传入的数组有不是h函数的项");
      
      // 不用执行c[i], 调用的时候执行了,只要收集
      children.push(item);
    
    return vnode(sel, data, children, undefined, undefined);
   else if (typeof c === "object" && c.hasOwnProperty("sel")) 
    // 说明是 ③ h('div', , h())
    let children = [c];
    return vnode(sel, data, children, undefined, undefined);
   else 
    throw new Error("传入的参数类型不对!");
  

(2)createElement( )函数

把虚拟节点从(vnode)变成真实DOM元素

/**
 * 创建节点。将vnode虚拟节点创建为DOM节点
 * 是孤儿节点,不进行插入操作
 * @param object vnode 
 * @returns object domNode 返回DOM节点
 */
export default function createElement(vnode) 
  // 创建一个DOM节点,这个节点现在是孤儿节点,最后返回这个DOM节点
  let domNode = document.createElement(vnode.sel);
  // 判断是有子节点还是有文本
  if (
    vnode.text !== "" &&
    (vnode.children === undefined || vnode.children.length === 0)
  ) 
    // 说明没有子节点,内部是文本
    domNode.innerText = vnode.text;
   else if (Array.isArray(vnode.children) && vnode.children.length > 0) 
    // 说明内部是子节点,需要递归创建节点 
    // 遍历vnode.children数组
    for (let ch of vnode.children) 
      // 递归调用 创建出它的DOM,一旦调用createElement意味着创建出DOM了。并且它的elm属性指向了创建出的dom,但是没有上树,是一个孤儿节点
      let chDOM = createElement(ch);
      // console.log(ch);
      // 上树
      domNode.appendChild(chDOM);
    
  
  // 补充elm属性
  vnode.elm = domNode;
  // 返回domNode DOM对象
  return domNode;

(3)patch( )函数

patch函数基本上也是diff算法的核心,比较这新虚拟节点和旧虚拟节点的不同。

export default function patch(oldVnode, newVnode) 
  // 判断传入的第一个参数是 DOM节点 还是 虚拟节点
  if (oldVnode.sel == "" || oldVnode.sel === undefined) 
    // 说明是DOM节点,此时要包装成虚拟节点
    oldVnode = vnode(
      oldVnode.tagName.toLowerCase(), // sel
      , // data
      [], // children
      undefined, // text
      oldVnode // elm
    );
  
  // 此时新旧节点都是虚拟节点了
  // 判断 oldVnode 和 newVnode 是不是同一个节点
  if (oldVnode.key === newVnode.key && oldVnode.sel === newVnode.sel) 
    console.log("是同一个节点,需要精细化比较");
    patchVnode(oldVnode, newVnode);
   else 
    console.log("不是同一个节点,暴力插入新节点,删除旧节点");
    // 创建 新虚拟节点 为 DOM节点
    let newVnodeElm = createElement(newVnode);
    // 获取旧虚拟节点真正的DOM节点
    let oldVnodeElm = oldVnode.elm;
    // 判断newVnodeElm是存在的
    if (newVnodeElm) 
      // 插入 新节点 到 旧节点 之前
      oldVnodeElm.parentNode.insertBefore(newVnodeElm, oldVnodeElm);
    
    // 删除旧节点
    oldVnodeElm.parentNode.removeChild(oldVnodeElm);
  

注释写的比较详细,大致三部分:

1. 第一次有可能传入进来的是一个元素,因为第一次还没有节点,需要把元素包装成虚拟节点 vnode

2. 如果 旧虚拟节点和新虚拟节点key和元素标签一样时 可以进入深层比较 调用patchVnode函数

3. 否则把新节点创建成dom元素 插入到旧节点之前 并移除旧节点

(4)patchVnode( )函数

import updateChild from "./updateChildren";
import createElement from "./createElement";
export default function patchVnode(oldVnode, newVnode) 
  // 第一种情况 全都一样 不需要操作
  if (oldVnode == newVnode) return;

  // 第二种情况新节点是文字
  if (  newVnode.text != undefined && (newVnode.children == undefined || newVnode.children.length == 0) ) 
    // 如果旧节点文字不等于新节点文字 直接替换
    if (oldVnode.text != newVnode.text) 
      oldVnode.elm.innerText = newVnode.text;
    
  // 第三种情况 新节点是数组
   else 
    // 如果新旧节点都是数组  也是最复杂的情况
    if (oldVnode.children && oldVnode.children.length > 0) 
      updateChild(oldVnode.elm, oldVnode.children, newVnode.children);
      //   如果旧节点是文字 新节点是数组
     else 
      // 清空旧节点文字 把子节点给旧节点的elm元素上
      oldVnode.elm.innerText = "";
      for (let i = 0; i < newVnode.children; i++) 
        const childDom = newVnode.children[i];
        childDom.elm = createElement(childDom);
        oldVnode.elm.appendChild(childDom.elm);
      
    
  
  newVnode.elm = oldVnode.elm;

(5)updateChild( )函数

这也是函数中最复杂的部分了,如果新旧节点均为数组,我们要做最细致的比较。

例如:旧节点 A,B,C  新节点 A,C,B  我们是肯定希望去移动它,并不是删除B,C重新创建出C,B

例如: 旧节点 A,B,C  新节点 D,A,B,C,E  同样我们需要在A前面创建出D  在C后面创建出E 

当然复杂的场景还有很多很多,这也是我们都要考虑的,这时候就需要用到snabbdom中的四个指针概念了。

 那什么是新前旧前、新后旧后呢?

 新前就是新节点(newVnode)中第一个,旧前就是旧节点(oldVnode)中的第一个, 新后旧后同理。

 遵循四种查找方式

1. 例如 第一种查询方式  新前和旧前(A==B)匹配上了  newStartIdx 和 oldStartIdx 都进行 +1  这时候新前旧前指针进行移动,移动后重新执行四种命中方式,   直到四种命中方式都找不到为止。

2. 若四种命中方式都查不着不到,则需要在oldVnode中进行循环查找,找到则插入到oldStartIdx之前,若循环也找不到则 创建出新元素 插入到oldEenIdx之前。 

3. 若新节点中有剩余 代表要新增元素 把新前和新后中间的元素 创建出真实DOM 插入到新后位置的之前。

4.若旧节点中有剩余 代表要删除元素 把旧前和旧后中间的元素 进行删除。

注意:当命中③时 需要移动节点 将当前新指向节点移动到旧节点之后,当命中④时,需要移动节点 将新指向节点移到到旧节点之前。

下面来举一个全面的 场景 以此用到所有命中方便理解

当然 图中最后一步是找不到的场景,当然也有找到的场景,在代码中 在 keyMap 中进行查找 

例如 keyMap  = A: 0,B:1,C:2   若匹配到了需要调用patchVnode函数 并且  需要移到指定的位置上,若匹配不上则插入到旧前节点之前。

export default function updataChild(parentElm, oldCh, newCh) 
  // 旧前
  let oldStartIdx = 0;
  // 新前
  let newStartIdx = 0;
  // 新后
  let newEndIdx = newCh.length - 1;
  // 旧后
  let oldEndIdx = oldCh.length - 1;
  // 旧前节点
  let oldStartVnode = oldCh[0];
  // 旧后节点
  let oldEndVnode = oldCh[oldEndIdx];
  // 新前节点
  let newStartVnode = newCh[0];
  // 新后节点
  let newEndVnode = newCh[newEndIdx];

  let keyMap = null;
  // 进入循环
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) 
    // debugger
    // 新前 旧前
    // 1. 如果相同在
    // 首先应该不是判断四种命中,而是略过已经加了undefined标记的项
     if (oldStartVnode === null || oldCh[oldStartIdx] === undefined) 
      oldStartVnode = oldCh[++oldStartIdx];
     else if (oldEndVnode === null || oldCh[oldEndIdx] === undefined) 
      oldEndVnode = oldCh[--oldEndIdx];
     else if (newStartVnode === null || newCh[newStartIdx] === undefined) 
      newStartVnode = newCh[++newStartIdx];
     else if (newEndVnode === null || newCh[newEndIdx] === undefined) 
      newEndVnode = newCh[--newEndIdx];
      else if (checkSameVnode(oldStartVnode, newStartVnode)) 
      // 新前与旧前
      console.log(" ①1 新前与旧前 命中");
      // 精细化比较两个节点 oldStartVnode现在和newStartVnode一样了
      patchVnode(oldStartVnode, newStartVnode);
      // 移动指针,改变指针指向的节点,这表示这两个节点都处理(比较)完了
      oldStartVnode = oldCh[++oldStartIdx];
      newStartVnode = newCh[++newStartIdx];
     else if (checkSameVnode(oldEndVnode, newEndVnode)) 
      // 新后与旧后
      console.log(" ②2 新后与旧后 命中");
      patchVnode(oldEndVnode, newEndVnode);
      oldEndVnode = oldCh[--oldEndIdx];
      newEndVnode = newCh[--newEndIdx];
     else if (checkSameVnode(oldStartVnode, newEndVnode)) 
      // 新后与旧前
      console.log(" ③3 新后与旧前 命中");
      patchVnode(oldStartVnode, newEndVnode);
      // 当③新后与旧前命中的时候,此时要移动节点。移动 新后(旧前) 指向的这个节点到老节点的 旧后的后面
      // 移动节点:只要插入一个已经在DOM树上 的节点,就会被移动
      parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling);
      oldStartVnode = oldCh[++oldStartIdx];
      newEndVnode = newCh[--newEndIdx];
     else if (checkSameVnode(oldEndVnode, newStartVnode)) 
      // 新前与旧后
      console.log(" ④4 新前与旧后 命中");
      patchVnode(oldEndVnode, newStartVnode);
      // 当④新前与旧后命中的时候,此时要移动节点。移动 新前(旧后) 指向的这个节点到老节点的 旧前的前面
      // 移动节点:只要插入一个已经在DOM树上的节点,就会被移动
      parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm);
      oldEndVnode = oldCh[--oldEndIdx];
      newStartVnode = newCh[++newStartIdx];
     else 
      // 四种都没有匹配到,都没有命中
      console.log("四种都没有命中");
      // 寻找 keyMap 一个映射对象, 就不用每次都遍历old对象了
      if (!keyMap) 
        keyMap = ;
        // 记录oldVnode中的节点出现的key
        // 从oldStartIdx开始到oldEndIdx结束,创建keyMap
        for (let i = oldStartIdx; i <= oldEndIdx; i++) 
          const key = oldCh[i].key;
          if (key !== undefined) 
            keyMap[key] = i;
          
        
      
      console.log(keyMap);
      // 寻找当前项(newStartIdx)在keyMap中映射的序号
      const idxInOld = keyMap[newStartVnode.key];
      if (idxInOld === undefined) 
        // 如果 idxInOld 是 undefined 说明是全新的项,要插入
        // 被加入的项(就是newStartVnode这项)现不是真正的DOM节点
        parentElm.insertBefore(createElement(newStartVnode), oldStartVnode.elm);
       else 
        // 说明不是全新的项,要移动
        const elmToMove = oldCh[idxInOld];
        patchVnode(elmToMove, newStartVnode);
        // 把这项设置为undefined,表示我已经处理完这项了
        oldCh[idxInOld] = undefined;
        // 移动,调用insertBefore也可以实现移动。
        parentElm.insertBefore(elmToMove.elm, oldStartVnode.elm);
      

      // newStartIdx++;
      newStartVnode = newCh[++newStartIdx];
    
  

  // 如果新节点还有剩余  要新增
  if (newStartIdx <= newEndIdx) 
    console.log('新节点有剩余',newCh[newEndIdx+1]);
    let before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm;
    for (let i = newStartIdx; i <= newEndIdx; i++) 
      parentElm.insertBefore(createElement(newCh[i]), before);
    // parentElm.insertBefore(createElement(newCh[i]), oldCh[oldStartIdx].elm);
    
  else if (oldStartIdx <= oldEndIdx) 
    console.log("旧节点有剩余");
    for (let i = oldStartIdx; i <= oldEndIdx; i++) 
      parentElm.removeChild(oldCh[i].elm);
    
  


function checkSameVnode(oldStartVnode, newStartVnode) 
  return (
    oldStartVnode.key == newStartVnode.key &&
    oldStartVnode.sel == newStartVnode.sel
  );

以上是关于vue2 diff算法及虚拟DOM的主要内容,如果未能解决你的问题,请参考以下文章

Vue面试必问虚拟dom和diff算法,一次解决

Vue2.x源码系列08Diff算法原理

从零实现Vue虚拟DOM和DOM-DIFF算法

Vuejs351- 带你解析vue2.0的diff算法

VUEReact中虚拟DOM(virtual DOM)技术 VNode及diff算法介绍

你怎么理解vue中的diff算法?