关于vue.js:vue源码虚拟DOM与diff算法

一、什么是虚构 DOM？
虚构 DOM 是由渲染函数创立的轻量级 JavaScript 对象，蕴含三个参数：元素，具备数据、prop、attr 等的对象，以及一个 children 数组。数组能够传递子级，每个子级也都具备这些参数，并也能够具备子级，以此类推，直到咱们构建残缺的 DOM 树为止。

当须要列表更新时，先更改虚构 DOM，而后在新虚构 DOM 和旧虚构 DOM 之间执 diff，算出最大量更新，最初反映到真正的 DOM 上。
二、snabbdomh
snabbdom 是驰名的虚构 DOM 库, 是 diff 算法的鼻祖,vue 源码借鉴了 snabbdom;

环境搭建：

在我的项目文件夹下运行 npm init, 而后装置 snabbdom

npm i -S snabbdom

webpack 依赖 5 版本以上

npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3

配置好 webpack.config.js 文件

const path = require('path')

module.exports = {
  entry:'./src/index.js',
  output:{
    // 虚构打包门路，不会生成真正的文件夹，而是在 8080 端口虚构生成
    publicPath: 'xuni',
    filename: 'bundle.js'
  },
  devServer:{
    port: 8080,
    // 动态资源文件夹
    contentBase: 'www'
  }
}

我的项目目录下创立 www 文件夹，www 下创立 index.html 文件，引入打包好的 js

<script src="xuni/bundle.js"></script>

我的项目目录下创立 src 文件夹，src 下创立 js 入口文件 index.js
配置我的项目 packge.json, 实现 npm run dev 开启一个 server

scripts: {"dev": "webpack-dev-server"}

在终端运行 npm run dev 能够开启一个 8080 端口的服务，环境就搭建实现啦。

三、虚构 DOM 如何被渲染函数生成？–h 函数
h 函数用来产生虚构节点 -vnode
1、h 函数的根本用法：

import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  h,
} from "snabbdom";

// 创立一个 patch 函数
const patch = init([classModule,propsModule,styleModule,eventListenersModule])

// 应用 h 创立一个 vnode
let myVnode1 = h('a', {props:{href:'http://www.baidu.com'}}, '百度')
console.log(myVnode1) 

// 让虚构节点上树
const container = document.getElementById('container')
patch(container,myVnode1)

h 函数创立一个节点
虚构 DOM(省略空属性)
实在 DOM

应用 h 函数创立一个带子元素的 vnode

虚构 DOM(省略空属性)

实在 DOM

由例子可见，h 函数非常灵便，依据传入参数的不同，利用函数的重载生成不同的虚构 DOM

2、手写 h 函数的外围性能（不思考重载，只思考三个参数的状况）

h.js

import vnode from './vnode'

// 编写一个低配版的 h 函数，这个函数必须承受三个参数，缺一不可
// 相当于它的重载性能交弱
// 调用时的状态必须为上面的三种之一：// 状态 1：h('div',{},'文字')
// 状态 2：h('div',{},[])
// 状态 3：h('div',{},h())
export default function (sel, data, c) {
  // 查看参数
  if (arguments.length != 3)
    throw new Error('对不起，h 函数必须传入三个参数')
  // 查看第三个参数 c 的类型
  if (typeof c === 'string' || typeof c === 'number') {
    // 阐明当初调用 h 函数是状态 1
    return vnode(sel, data, undefined, c, undefined)
  } else if (Array.isArray(c)) {
    // 阐明当初调用 h 函数是状态 2
    let children = []
    for (let i = 0; i < c.length; i++) {// 查看 c[i]必须是一个对象，因为 h()返回值为对象
      if (!(typeof c[i] === 'object' && c[i].hasOwnProperty('sel'))) {throw new Error('数组元素必须为 h()函数')
      } else {children.push(c[i])
      }
    }
    return vnode(sel, data, children, undefined, undefined)
  } else if (typeof c === 'object' && c.hasOwnProperty('sel')) {
    // 阐明当初调用 h 函数为状态 3
    //children 数组只有一个元素
    return vnode(sel, data, , undefined, undefined)
  }
}

vnode.js

export default function (sel, data, children, text, elm) {
  const key = data.key
  return {sel, data, children, text, elm, key}
}

index.js(测试)

import h from './mysnabbdom/h'

let myVnode = h('ul', {}, [h('li', {}, h('span', {}, 'peach')),
  h('li', {}, h('span', {}, 'banana')),
  h('li', {}, [h('span', {}, 'apple'),
    h('ul', {}, [h('li', {}, 'price:8'),
      h('li', {}, 'color:red')
    ])
  ])
])

console.log(myVnode)

四、diff 算法原理
外围 –patch()
1、patch 根本应用：

import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  h,
} from "snabbdom";

const patch = init([classModule,propsModule,styleModule, eventListenersModule,]);

const vnode = h('ul',[h('li',{key:'A'},'A')
  h('li',{key:'B'},'B')
  h('li',{key:'C'},'C')
])
const newVnode = h('ul',[h('li',{key:'D'},'D')
  h('li',{key:'A'},'A')
  h('li',{key:'B'},'B')
  h('li',{key:'C'},'C')
])
// 调用 patch, 两个虚构 DOM 间进行 diff 算法，计算最大量更新
patch(vnode, newVnode);

key 是节点的惟一标识，能够通知 diff 算法，在更改前后它们是否是同一个 DOM 节点

// 判断是否为同一个节点:
oleVnode.key === newVnode.key && oldVnode.sel === newVnode.sel

只有是同一个虚构节点，才进行精细化比拟，否则就暴力删除旧的，插入新的。
只进行同层比拟，不会进行跨层比拟，即便是同一片虚构节点，只有是跨层了，则不进行 diff

2、模仿实现 patch()

首先解决新旧节点不是同一个节点的状况：

新建 patch.js 文件

import vnode from "./vnode";
import createElement from './createElement'

export default function (oldVnode, newVnode) {
  // 判断 vnode1 是虚构节点还是 DOM 节点
  if (oldVnode.sel == undefined || oldVnode.sel == '') {
    //vnode1 是 DOM 节点，需转成虚构节点
    oldVnode = vnode(oldVnode.tagName.toLowerCase(), {}, undefined, undefined, oldVnode)
  }

  // 判断是否为同一节点
  if (oldVnode.key === newVnode.key && oldVnode.sel === newVnode.sel) {
    // 是同一个，进行精细化比拟
    //********diff 算法 *******
  } else {
    // 不是同一个节点，创立新节点
    let newVnodeElm = createElement(newVnode)
    if (oldVnode.elm.parentNode && newVnodeElm) {
      // 将新节点上树，让标杆节点的父元素调用 insertBefore 办法，将创立的节点，插入到标杆节点之前
      oldVnode.elm.parentNode.insertBefore(newVnodeElm, oldVnode.elm)
    }
    // 删除旧节点
    oldVnode.elm.parentNode.removeChild(oldVnode.elm)
  }
}

新建 createElement.js 文件，作用为依据 vnode 生成对应的 DOM

//vnode：需创立 DOM 的虚构节点
export default function createElement(vnode) {const domNode = document.createElement(vnode.sel)
  // 判断 vnode 的 inner 是否只有文本
  if (vnode.text != '' && (vnode.children == undefined || vnode.children.length == 0)) {
    // 将文本插入到 domeNode
    domNode.innerText = vnode.text
  } else if (Array.isArray(vnode.children) && vnode.children.length > 0) {
    //children 为数组，具备子元素
    // 递归创立节点
    for (let i = 0; i < vnode.children.length; i++) {let ch = vnode.children[i]
      // 一旦调用 createElement()办法，就创立了一个 DOM，并且将该 vnode 的 elm 属性指向了这个创立的 DOM
      let chDOM = createElement(ch)
      domNode.appendChild(chDOM)
    }
  }
  // 给 vnode 补充 elm 属性
  vnode.elm = domNode
 
  // 返回 elm,elm 是一个纯 DOM 对象
  return vnode.elm
}

index.js 测试

点按钮能实现 DOM 替换

新旧节点为同一个节点时，流程图如下：

解决新旧节点的子节点含 text 的状况：

patch.js 新增代码如下

  // 判断是否为同一节点
  if (oldVnode.key === newVnode.key && oldVnode.sel === newVnode.sel) {
    // 是同一个，进行精细化比拟
    // 判断新旧 vnode 是否是同一个对象
    if (oldVnode === newVnode) return
    // 判断 newVnode 有没有 text 属性
    if (newVnode.text != undefined && (newVnode.children == undefined || newVnode.children.length == 0)) {
      //newVnode 有 text 属性，判断 newVnode 的 text 和 oldVnode 是否雷同
      if (newVnode.text != oldVnode.text) {
        //text 不同，将 oldVnode.elm 中的 innerText 扭转为 newVnode.text
        oldVnode.elm.innerText = newVnode.text
      }
    } else {
      //newVnode 没有 text 属性
      // 判断 oldVnode 有没有 children
      if (oldVnode.children != undefined && oldVnode.children.length > 0) {
        //oldVnode 和 newVnode 都有 children
        //*****diff 更新子节点 ******
      } else {
        //oldVnode 没有，newVnode 有，并且 oldVnode 有 text, 清空 oldVnode 中的 text，并将 newVnode 中的 children 增加给 oldVnode 的 children
        oldVnode.elm.innerHTML = ''
        // 创立新的 vnode 子节点，创立 DOM，上树
        for (let i = 0; i < newVnode.children.length; i++) {let dom = createElement(newVnode.children[i])
          oldVnode.elm.appendChild(dom)
        }
      }
    }
  }

减少 key 属性，标识节点
在 vnode.js 中配置

五、diff 算法外围
在解决子节点时，咱们发现要思考的状况十分多，经典的 diff 算法优化策略提出四个指针，采纳四种命中查找：

新前与旧前
新后与旧后
新后与旧前
新前与旧后

查找规定：

四个指针挪动规定：新前 / 旧前 指针只往下移， 新后 / 旧后 指针只往上移
命中一种就不再往下进行命中判断了，挪动以后命中形式的指针；
- 若未命中，则程序向下，查找下一种命中；
- 若四种都未命中，则在所有未解决的旧节点中 循环查找 ，若找到，将 旧节点 中找到的节点变为 undefined，再 挪动新前 指针指向的节点挪动至旧前指针之前；
- 若循环也未找到，则将该新前指针指向的节点插入到旧前指针之前。再挪动指针，进行下一次命中查找。
完结循环判断条件为：while(新前 <= 新后 && 旧前 <= 旧后)
若 旧节点 先循环结束，若新节点中还有未遍历的，则未遍历的节点为新增节点，直接插入到旧前指针节点之前即可。
若新节点先循环结束，若旧节点有未遍历的节点，则阐明残余节点是要删除的节点
当新前与旧前命中时，新前与旧前指针都往下移
当新后与旧后命中时，新后与旧后指针都往上移
当新后与旧前命中时，需先将新后指向的节点挪动到过后旧后指针的前面，再将新后指针上移，旧前指针下移
当新前与旧后命中时，需先将新前指向的节点挪动到过后旧前指针的后面，再将新前指针下移，旧后指针上移

六、手写 diff 算法

将 patch.js 中是同一个节点, 进行精细化比拟的代码提取成单文件 patchVnode.js

新建 updateChildren.js

import patchVnode from './patchVnode'
import createElement from './createElement'

// 封装判断两个节点是否是同一个虚构节点的函数
function checkSameVnode(a, b) {return a.sel == b.sel && a.key == b.key}

// 参数 parentElm: 父元素 参数 oldCh: 旧子节点对象 参数 newCh: 新子节点对象
export default function (parentElm, oldCh, newCh) {
  let oldStartIdx = 0,             // 旧前
    newStartIdx = 0,               // 新前
    oldEndIdx = oldCh.length - 1,  // 旧后
    newEndIdx = newCh.length - 1,  // 新后
    oldStartVnode = oldCh[0],      // 旧前节点
    oldEndVnode = oldCh[oldEndIdx],// 旧后节点
    newStartVnode = newCh[0],      // 新前节点
    newEndVnode = newCh[newEndIdx],// 新后节点
    keyMap = null                  //keyMap 缓存未解决的节点
  // 循环条件
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    // 判断查看项是不是 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)) {
      // 新前与旧前命中
      patchVnode(oldStartVnode, newStartVnode)
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    } else if (checkSameVnode(oldEndVnode, newEndVnode)) {
      // 新后与旧后命中
      patchVnode(oldEndVnode, newEndVnode)
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (checkSameVnode(newEndVnode, oldStartVnode)) {
      // 新后与旧前命中
      patchVnode(oldStartVnode, newEndVnode)
      // 在旧后指针之后插入旧前指向的节点
      parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling)
      oldStartVnode = oldCh[++oldStartIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (checkSameVnode(newStartVnode, oldEndVnode)) {
      // 新前与旧后命中
      patchVnode(oldEndVnode, newStartVnode)
      // 在旧前指针之前插入旧后指针指向的节点
      parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm)
      newStartVnode = newCh[++newStartIdx]
      oldEndVnode = oldCh[--oldEndIdx]
    } else {
      // 不满足四种命中，循环查找
      // 设置 keyMap，保留未查找过的节点
      if (!keyMap) {keyMap = {}
        for (let i = oldStartIdx; i <= oldEndIdx; i++) {const key = oldCh[i].key
          key != undefined && (keyMap[key] = i)
        }
      }
      // 寻找以后项（newStartVnode）在 keyMap 中的映射地位 index
      const idxInOld = keyMap[newStartVnode.key]
      if (idxInOld == undefined) {
        // 以后项在 oldCh 中没有，是一个全新的项
        parentElm.insertBefore(createElement(newStartVnode), oldStartVnode.elm)
      } else {
        // 以后项在 oldCh 中存在，需挪动地位
        const elmToMove = oldCh[idxInOld]
        patchVnode(elmToMove, newStartVnode)
        oldCh[idxInOld] = undefined
        parentElm.insertBefore(elmToMove.elm, oldStartVnode.elm)
      }
      newStartVnode = newCh[++newStartIdx]
    }
  }
  // 查看是否有残余节点
  if (newStartIdx <= newEndIdx) {
    // 新节点有残余，在 oldStartVnode 之前插入残余新增的节点，若
    //insertBefore 第二个参数为 null 时，会将节点增加在结尾
    let before = oldStartVnode ? oldStartVnode.elm : null
    for (let i = newStartIdx; i <= newEndIdx; i++) {parentElm.insertBefore(createElement(newCh[i]), before)
    }
  } else if (oldStartIdx <= oldEndIdx) {
    // 旧节点有残余，删除节点
    for (let i = oldStartIdx; i <= oldEndIdx; i++) {oldCh[i] && parentElm.removeChild(oldCh[i].elm)
    }
  }
}

patchVnode.js 引入 updateChildren.js 并调用

关于vue.js:vue源码虚拟DOM与diff算法

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）