关于Vue的Diff算法

原创 已于 2025-03-24 19:10:56 修改 · 置顶 · 1.2k 阅读 · 24 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #diff算法 #虚拟dom

于 2025-03-22 23:34:05 首次发布

关于Vue的Diff算法

1.概述

1.1 什么是diff算法

diff就是比较两个树，render会生成两颗树，一个新树newVnode,一棵旧树oldVnode。然后两棵树进行对比更新差异就是diff ,全称是difference, 在vue里面diff算法就是通过patch函数来完成的，所以有的时候也叫patch算法。目的是为了提升性能。

1.2 关于虚拟dom

虚拟 DOM是一种通过 JavaScript 对象模拟真实 DOM 树结构的技术。它的主要目标是提高页面渲染的效率，减少浏览器 DOM 操作的频繁性。虚拟 DOM 并不是一种新的 DOM 技术，而是一种通过抽象层的设计，使得对 UI 更新的操作变得更加高效的技术。

1.3 操作dom和操作数据的对比

第一种方式:操作dom

  <div id="box">11111</div>
    <script>
      let box = document.querySelector("#box");
      console.time("a");
      for (let i = 0; i <= 10000; i++) {
        box.innerHTML = i;
      }
      console.timeEnd("a");
  </script>

在这里插入图片描述

第二种方式:数据化

  <body>
    <div id="box">11111</div>
    <script>
      let box = document.querySelector("#box");
      console.time("a");
      let count = 0;
      for (let i = 0; i <= 10000; i++) {
        count = i;
      }
      box.innerHTML = count;
      console.timeEnd("a");
    </script>
  </body>

在这里插入图片描述

可以发现第二种方式所用的时间比较短。因为它减少了回流重绘的次数，这个与浏览器渲染原理有关。详情见我写的文章https://blog.csdn.net/fageaaa/article/details/146296227。

1.4 主流的思路

  • snabbdom https://www.npmjs.com/package/snabbdom
    ‌Vue2的Diff算法‌是基于snabbdom实现，通过同层比较和双端比较策略来减少不必要的DOM操作。如果新旧vnode相同，则直接返回；否则，更新子节点或新增/删除节点‌。‌Vue 3的Diff算法‌：通过LIS优化，减少DOM操作，提高性能，尤其是在处理大规模列表时表现更优‌

  • virtual-dom

2.关于snabbdom

2.1 环境搭建

npm init -y
cnpm install webpack webpack-cli webpack-dev-server html-webpack-plugin -S
cnpm install snabbdom -S

新建webpack.config.js：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "[name].js",
    // 注意这个dist的路径设置成上一级
    path: path.resolve(__dirname, "./dist"),
    clean: true,
  },
  plugins: [new HtmlWebpackPlugin(
    template: "./public/index.html", //指向的html
  )],
};

新建src/index.js,然后去https://www.npmjs.com/package/snabbdom(snabbdom官网地址)，找到Example：
在这里插入图片描述

把示例代码复制到src/index.js中(要进行适当修改)

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

const patch = init([
  // Init patch function with chosen modules
  classModule, // makes it easy to toggle classes
  propsModule, // for setting properties on DOM elements
  styleModule, // handles styling on elements with support for animations
  eventListenersModule, // attaches event listeners
]);

const container = document.getElementById("container");
const btn = document.getElementById('btn');

const vnode1 = h('ul',{},[
  h('li',{key:'a'},'a'),
  h('li',{key:'b'},'b'),
  h('li',{key:'c'},'c')
]);

patch(container,vnode1);


const vnode2 = h('ul',{},[
  h('li',{key:'b'},'b'),
  h('li',{key:'c'},'c')
]);

console.log( vnode2 )
btn.onclick = function(){
  patch(vnode1,vnode2);
}

2.2 虚拟节点和真实节点

虚拟节点：

{
  children: undefined
  data: {}
  elm: h1 //真实的dom节点
  key: undefined
  sel: "h1"
  text: "你好h1"
}

真实节点：

<h2>你好</h2>

我们再来看一个例子，如上有一部分代码:

const vnode2 = h('ul',{},[
  h('li',{key:'b'},'b'),
  h('li',{key:'c'},'c')
]);

console.log( vnode2 )

我们去看看这个虚拟节点vnode2：
在这里插入图片描述

2.3 新老节点替换的规则

​(1) 如果新老节点不是同一个节点名称(标签)，那么就暴力删除旧的节点，创建插入新的节点。
​(2) 只能同级比较，不能跨层比较。如果跨层那么就暴力删除旧的节点，创建插入新的节点。
​(3) 如果是相同节点，又分为很多情况

  • 新节点有没有children
    如果新的节点没有children，那就证明新节点是文本，那直接把旧的替换成新的文本
  • 新节点有children
    • 新的有children，旧的也有children
      这就涉及到diff算法的核心了
    • 新的有children，旧的没有
      创建元素添加（把旧的内容删除清空掉，增加新的）

下面详细说说diff算法的核心部分(最复杂的情况):

  • 第一步:旧前和新前
    匹配：旧前的指针++ 、 新前的指针++
  • 第二步:旧后和新后
    匹配：旧后的指针-- 、 新后的指针–
  • 第三步:旧前和新后
    匹配：旧前的指针++ 、 新后的指针–
  • 第四步:旧后和新前
    匹配：旧后的指针-- 、 新前的指针++
  • 第五步:以上都不满足条件,就会查找
    新的指针++，新的添加到页面上并且新在旧的中有，要给旧的复制成undefined
  • 第六步:创建或者删除

现在可能不好理解这些。下面直接手写diff算法来辅助理解。

3.手写diff算法

3.1 生成虚拟dom

先看看虚拟dom的大概样子:

//真实节点:
<h2>你好</h2>

//虚拟节点
{
  children: undefined
  data: {}
  elm: h1 //真实的dom节点
  key: undefined
  sel: "h1"
  text: "你好h1"
}

src/index.js:

//src/index.js:
import h from "./dom/h";
let vnode1 = h("div", {}, "你好吖");
console.log(vnode1);
let vnode2 = h("ul", {}, [
  h("li", {}, "a"),
  h("li", {}, "b"),
  h("li", {}, "c"),
  h("li", {}, "你把花木兰都沉默"),
]);
console.log(vnode2);

src/dom/h.js:

//src/dom/h.js
import vnode from "./vnode";
export default function (sel, data, params) {
  //h函数的 第三个参数是字符串类型【意味着：他没有子元素】
  if (typeof params == "string") {
    return vnode(sel, data, undefined, params, undefined);
  } else if (Array.isArray(params)) {
    //h函数的第三个参数，是不是数组，如果是数组【意味着：有子元素】
    let children = [];
    for (let item of params) {
      children.push(item);
    }
    return vnode(sel, data, children,undefined,undefined);
  }
}

src/dom/vnode.js:

//src/dom/vnode.js:
export default function( sel , data , children , text , elm  ){
	return {
		sel, 
		data, 
		children, 
		text, 
		elm
	}
}

看index.js中打印了vnode1 、vnode2两个虚拟节点
在这里插入图片描述

3.2 patch不是同一个节点类型

src/dom/patch.js:

//src/dom/patch.js:
//oldVnode ===> 旧虚拟节点
//newVnode ===> 新虚拟节点
import vnode from './vnode';
import createElement from './createElement'
export default function( oldVnode , newVnode ){
	//如果oldVnode 没有sel ，就证明是非虚拟节点 ( 就让他变成虚拟节点 )
	if(  oldVnode.sel == undefined  ){
		oldVnode = vnode(
			oldVnode.tagName.toLowerCase(), //sel
			{},//data
			[],
			undefined,
			oldVnode
		)
	}
	//判断 旧的虚拟节点  和  新的虚拟节点   是不是同一个节点
	if(  oldVnode.sel === newVnode.sel  ){
		//判断就条件就复杂了（很多了）
	}else{//不是同一个节点，那么就暴力删除旧的节点，创建插入新的节点。
		//把新的虚拟节点 创建为 dom节点
		let newVnodeElm = createElement(  newVnode );
		//获取旧的虚拟节点 .elm 就是真正节点
		let oldVnodeElm = oldVnode.elm;
		//创建新的节点
		if(  newVnodeElm  ){
			oldVnodeElm.parentNode.insertBefore(newVnodeElm ,oldVnodeElm);
		}
		//删除旧节点
		oldVnodeElm.parentNode.removeChild( oldVnodeElm );
	}
}

src/dom/createElement.js:

//src/dom/createElement.js:
//vnode 为新节点，就是要创建的节点
export default function createElement( vnode ){
	//创建dom节点
	let domNode = document.createElement( vnode.sel );
	//判断有没有子节点 children 是不是为undefined
	if(  vnode.children == undefined  ){
		domNode.innerText = vnode.text;	
	}else if( Array.isArray(vnode.children) ){//新的节点有children（子节点）
		//说明内部有子节点 ， 需要递归创建节点
		for( let child of vnode.children){
			let childDom = createElement(child);
			domNode.appendChild( childDom );
		}
	}
	//补充elm属性
	vnode.elm = domNode;
	return domNode;
}

下面来测试一下:
src/index.js:

//src/index.js:
import h from './dom/h'
import patch from './dom/patch'

//获取到了真实的dom节点
let container = document.getElementById('container');

//虚拟节点1
//let vnode1 = h('h1',{},'你好吖');

//虚拟节点2
let vnode2 = h('ul',{},[
	h('li',{},'a'),
	h('li',{},'b'),
	h('li',{},'c'),
	h('li',{},'你把花木兰都沉默hhhhh')
]);

patch( container,vnode2 );

public/index.html：

//public/index.html：
<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="container">这是container</div>
  </body>
</html>

在这里插入图片描述

3.3 相同节点类型有没有children

src/dom/patch.js:

//src/dom/patch.js:
//oldVnode ===> 旧虚拟节点
//newVnode ===> 新虚拟节点
import vnode from './vnode';
import createElement from './createElement'
import patchVnode from './patchVnode'
export default function( oldVnode , newVnode ){

	//如果oldVnode 没有sel ，就证明是非虚拟节点 ( 就让他变成虚拟节点 )
	if(  oldVnode.sel == undefined  ){
		oldVnode = vnode(
			oldVnode.tagName.toLowerCase(), //sel
			{},//data
			[],
			undefined,
			oldVnode
		)
	}

	//判断 旧的虚拟节点  和  新的虚拟节点   是不是同一个节点
	if(  oldVnode.sel === newVnode.sel  ){
		//判断就条件就复杂了（很多了）
		patchVnode( oldVnode,newVnode );

	}else{//不是同一个节点，那么就暴力删除旧的节点，创建插入新的节点。
		//把新的虚拟节点 创建为 dom节点
		let newVnodeElm = createElement(  newVnode );
		//获取旧的虚拟节点 .elm 就是真正节点
		let oldVnodeElm = oldVnode.elm;
		//创建新的节点
		if(  newVnodeElm  ){
			oldVnodeElm.parentNode.insertBefore(newVnodeElm ,oldVnodeElm);
		}
		//删除旧节点
		oldVnodeElm.parentNode.removeChild( oldVnodeElm );
	}
}

src/dom/patchVnode.js:

//src/dom/patchVnode.js:
import createElement from "./createElement";
export default function patchVnode(oldVnode, newVnode) {
  //判断新节点有没有children(新的没有子节点)
  if (newVnode.children === undefined) {
    //新节点的文本 和 旧节点的文本内容是不是一样的
    if (newVnode.text !== oldVnode.text) {
      oldVnode.elm.innerText = newVnode.text;
    }
  } else {
    //新的有子节点
    //新的虚拟节点有children ，旧的虚拟节点有children 
    if (oldVnode.children !== undefined && oldVnode.children.length > 0) {
      //最复杂的情况了 diff核心了
      console.log("新旧都有children");
    } else {
      //新的虚拟节点有children,旧的虚拟节点没有children 

      //把旧节点的内容清空
      oldVnode.elm.innerHTML = "";//这只是示意
      //遍历新的子节点，创建dom元素，添加到页面中
      for (let child of newVnode.children) {
        let childDom = createElement(child);
        oldVnode.elm.appendChild(childDom);
      }
    }
  }
}

下面来测试一下:
src/index.js:

//src/index.js:
import h from "./dom/h";
import patch from "./dom/patch";

//获取到了真实的dom节点
let container = document.getElementById("container");
//获取到了按钮
let btn = document.getElementById("btn");

//虚拟节点
let vnode1 = h("ul", {}, [
  h("li", {}, "a"),
  h("li", {}, "b"),
  h("li", {}, "c"),
]);

btn.onclick = function () {
  patch(container, vnode1);
};

public/index.html：

//public/index.html：
<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="container">这是container</div>
    <button id="btn">按钮</button>
  </body>
</html>

页面初始如下:
在这里插入图片描述

点击按钮后:
在这里插入图片描述

4.diff算法的核心部分

4.1 diff算法的核心理论

上面我说了diff算法核心部分步骤:
在这里插入图片描述
现在要好好分析这一块!!!

4.1.1 第一步:旧前和新前

ps:下面的这些虚拟dom默认都是带key。
在这里插入图片描述

  • 如上，两个虚拟dom做比对。旧前和新前的指针首先都指向0
  • 首先使用旧前和新前策略进行比对，都是a(满足条件)，旧前和新前的两个指针都++，指向1
  • 进行下一次循环，还是首先使用旧前和新前策略进行比对，都是b(满足条件)，旧前和新前的两个指针都++，指向2
  • 进行下一次循环，还是首先使用旧前和新前策略进行比对，都是c(满足条件)，旧前和新前的两个指针都++，指向3
  • 进行下一次循环，还是首先使用旧前和新前策略进行比对，都是d(满足条件)。旧前和新前的两个指针都++,这时候超出范围了，会退出循环

4.1.1 第二步:旧后和新后

在这里插入图片描述

  • 如上，两个虚拟dom做比对。旧前和新前的指针首先都在0;旧后和新后的指针都指向2；
  • 首先使用旧前和新前策略进行比对，旧节点是b新节点是a(不满足条件)
  • 使用旧后和新后策略进行比对，都是c(满足条件)，新后和旧后两个指针都--，指向1
  • 进行下一次循环，首先还是使用旧前和新前策略进行比对，旧节点是b新节点是a(不满足条件)
  • …

4.1.3 第三步:旧前和新后

在这里插入图片描述

  • 如上，两个虚拟dom做比对。旧前和新前的指针首先都在0;旧后和新后的指针都指向3；
  • 首先使用旧前和新前策略进行比对，都是a(满足条件),旧前和新前的两个指针都++，指向1
  • 进行下一次循环,首先使用旧前和新前策略进行比对，都是c(满足条件)，旧前和新前两个指针都++，指向2
  • 进行下一次循环,首先使用旧前和新前策略进行比对,旧前指针指向c，新前指针指向d(不满足条件)
  • 使用旧后和新后策略进行比对，旧后指针指向d,新后节点指向c(不满足条件)
  • 使用旧前和新后策略进行比对，旧前指针指向c,新后节点指向c(满足条件)，旧前指针++(指向3),新后指针--(指向2)
    此时旧后指针指向3,新前指针指向2
  • 进行下一次循环,首先使用旧前和新前策略进行比对,旧前指针指向d，新前指针指向c(满足条件),退出循环

4.1.4 第四步:旧后和新前

按照上面的思路，应该很好理解。在这就不多说

4.1.5 以上四个都不满足,就会查找

新的指针++，新的添加到页面上并且新在旧的中有，要给旧的复制成undefined。

在这里插入图片描述

4.1.6 创建和删除

4.1.5和4.1.6将在下面的代码中详细讲清楚。

4.2 手写diff核心:判断前四种情况

生成虚拟dom时候将key也带上。

src/dom/vnode/.js：

//src/dom/vnode/.js
export default function (sel, data, children, text, elm) {
  let key = data.key;
  return {
    sel,
    data,
    children,
    text,
    elm,
    key,
  };
}

src/dom/patchVnode.js:

//src/dom/patchVnode.js
import createElement from './createElement'
import updateChildren from './updateChildren'
export default function patchVnode( oldVnode,newVnode ){

	//判断新节点有没有children 
	if( newVnode.children === undefined ){ //新的没有子节点

		//新节点的文本 和 旧节点的文本内容是不是一样的
		if(  newVnode.text !== oldVnode.text  ){
			oldVnode.elm.innerText = newVnode.text;
		}

	}else{//新的有子节点

		//新的虚拟节点有  ，  旧的虚拟节点有
		if(  oldVnode.children !== undefined && oldVnode.children.length > 0 ){

			//最复杂的情况了 diff核心了
			updateChildren( oldVnode.elm , oldVnode.children , newVnode.children )

		}else{//新的虚拟节点有  ，  旧的虚拟节点“没有”

			//把旧节点的内容 清空
			oldVnode.elm.innerHTML = '';
			//遍历新的 子节点 ， 创建dom元素，添加到页面中
			for( let child of newVnode.children ){
				let childDom = createElement(child);
				oldVnode.elm.appendChild(childDom);
			}
		}
	}
}

src/dom/updateChildren.js:

//src/dom/updateChildren.js
import patchVnode from './patchVnode'

//判断倆个虚拟节点是否为同一个节点
function sameVnode( vNode1, vNode2 ){
	return vNode1.key == vNode2.key;
}
//参数一：真实dom节点
//参数二：旧的虚拟节点
//参数三：新的虚拟节点
export default (  parentElm , oldCh , newCh ) => {

	let oldStartIdx = 0; 			//旧前的指针
	let oldEndIdx = oldCh.length-1; //旧后的指针
	let newStartIdx = 0; 			//新前的指针
	let newEndIdx = newCh.length-1; //新后的指针

	let oldStartVnode = oldCh[0];   	//旧前虚拟节点
	let oldEndVnode = oldCh[oldEndIdx]; //旧后虚拟节点
	let newStartVnode = newCh[0];       //新前虚拟节点
	let newEndVnode = newCh[newEndIdx]; //新后虚拟节点

	while( oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx ){

		if( sameVnode( oldStartVnode,newStartVnode )  ){
			//第一种情况：旧前 和 新前
			console.log('1');
			patchVnode( oldStartVnode,newStartVnode );
			if( newStartVnode ) newStartVnode.elm = oldStartVnode?.elm;
			oldStartVnode = oldCh[++oldStartIdx];
			newStartVnode = newCh[++newStartIdx];
		}else if(  sameVnode( oldEndVnode,newEndVnode )  ){
			//第二种情况：旧后 和 新后
			console.log('2');
			patchVnode( oldEndVnode,newEndVnode );
			if( newEndVnode ) newEndVnode.elm = oldEndVnode?.elm;
			oldEndVnode = oldCh[--oldEndIdx];
			newEndVnode = newCh[--newEndIdx];

		}else if(  sameVnode( oldStartVnode,newEndVnode )  ){
			//第三种情况：旧前 和 新后
			console.log('3');
			patchVnode( oldStartVnode,newEndVnode );
			if( newEndVnode ) newEndVnode.elm = oldStartVnode?.elm;
			//把旧前指定的节点移动到旧后指向的节点的后面
			parentElm.insertBefore( oldStartVnode.elm , oldEndVnode.elm.nextSibling  );
			oldStartVnode = oldCh[++oldStartIdx];
			newEndVnode = newCh[--newEndIdx];
		}else if(  sameVnode( oldEndVnode,newStartVnode )  ){
			//第四种情况：旧后 和 新前
			console.log('4');
			patchVnode( oldEndVnode,newStartVnode );
			if( newStartVnode ) newStartVnode.elm = oldEndVnode?.elm;
			//将旧后指定的节点移动到旧前指向的节点的前面
			parentElm.insertBefore( oldEndVnode.elm , oldStartVnode.elm );
			oldEndVnode = oldCh[--oldEndIdx];
			newStartVnode = newCh[++newStartIdx];

		}else{
			//第五种情况：以上都不满足条件 ===》查找

		}
	}
}

下面来测试一下:
src/index.js:

import h from './dom/h'
import patch from './dom/patch'


//获取到了真实的dom节点
let container = document.getElementById('container');
//获取到了按钮
let btn = document.getElementById('btn');

//虚拟节点
let vnode1 = h('ul',{},[
	h('li',{key:'a'},'a'),
	h('li',{key:'b'},'b'),
	h('li',{key:'c'},'c'),
	h('li',{key:'d'},'d'),
]);

patch( container,vnode1 );

let vnode2 = h('ul',{},[
	h('li',{key:'d'},'d'),
	h('li',{key:'c'},'c'),
	h('li',{key:'b'},'b'),
	h('li',{key:'a'},'a'),
]);


btn.onclick = function(){
	patch( vnode1,vnode2 );
}

界面初始：
在这里插入图片描述

点击按钮之后，列表变化了。同时控制台依次打印为3、3、3、1。

在这里插入图片描述

这个应该很好理解。

  • 一开始界面如下:
    在这里插入图片描述
  • 如上，两个虚拟dom做比对。旧前指针指向a,旧后的指针在d;新前指针指向d,和新后的指针在a
  • 首先使用旧前和新前策略进行比对，旧前指针指向a,新前指针指向d,不一致(不满足条件)
  • 使用旧后和新后策略进行比对，旧后指针指向d,新后节点指向a(不满足条件)
  • 使用旧前和新后策略进行比对，旧前指针指向a,新后节点指向a(满足条件)。说明是同一节点。打印3，同时旧前指针++,新后指针--
    在这里插入图片描述
  • 进行下一次循环,首先使用旧前和新前策略进行比对，旧前指针指向b,新前指针指向d,不一致(不满足条件)
  • 使用旧后和新后策略进行比对，旧后指针指向d,新后节点指向b(不满足条件)
  • 使用旧前和新后策略进行比对，旧前指针指向b,新后节点指向b(满足条件)。说明是同一节点。打印3，同时旧前指针++,新后指针--
    在这里插入图片描述
  • 进行下一次循环,首先使用旧前和新前策略进行比对，旧前指针指向c,新前指针指向d,不一致(不满足条件)
  • 使用旧后和新后策略进行比对，旧后指针指向d,新后节点指向c(不满足条件)
  • 使用旧前和新后策略进行比对，旧前指针指向c,新后节点指向c(满足条件)。说明是同一节点。打印3，同时旧前指针++,新后指针--
    在这里插入图片描述
  • 进行下一次循环,首先使用旧前和新前策略进行比对,旧前指针指向d，新前指针指向d(满足条件),说明是同一节点。打印1，同时旧前指针++,新前指针++。
  • 此时旧前指针>旧后指针，新前指针>新后指针，会退出循环。

4.3 手写diff核心:判断第五种情况

src/dom/updateChildren.js:

//src/dom/updateChildren.js
import patchVnode from "./patchVnode";
import createElement from "./createElement";
//判断倆个虚拟节点是否为同一个节点
function sameVnode(vNode1, vNode2) {
  return vNode1.key == vNode2.key;
}
//参数一：真实dom节点
//参数二：旧的虚拟节点
//参数三：新的虚拟节点
export default (parentElm, oldCh, newCh) => {
  let oldStartIdx = 0; //旧前的指针
  let oldEndIdx = oldCh.length - 1; //旧后的指针
  let newStartIdx = 0; //新前的指针
  let newEndIdx = newCh.length - 1; //新后的指针

  let oldStartVnode = oldCh[0]; //旧前虚拟节点
  let oldEndVnode = oldCh[oldEndIdx]; //旧后虚拟节点
  let newStartVnode = newCh[0]; //新前虚拟节点
  let newEndVnode = newCh[newEndIdx]; //新后虚拟节点

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (oldStartVnode == undefined) {
      oldStartVnode = oldCh[++oldStartIdx];
    }
    if (oldEndVnode == undefined) {
      oldEndVnode = oldCh[--oldEndVnode];
    } else if (sameVnode(oldStartVnode, newStartVnode)) {
      //第一种情况：旧前 和 新前
      console.log("1");
      patchVnode(oldStartVnode, newStartVnode);
      if (newStartVnode) newStartVnode.elm = oldStartVnode?.elm;
      oldStartVnode = oldCh[++oldStartIdx];
      newStartVnode = newCh[++newStartIdx];
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
      //第二种情况：旧后 和 新后
      console.log("2");
      patchVnode(oldEndVnode, newEndVnode);
      if (newEndVnode) newEndVnode.elm = oldEndVnode?.elm;
      oldEndVnode = oldCh[--oldEndIdx];
      newEndVnode = newCh[--newEndIdx];
    } else if (sameVnode(oldStartVnode, newEndVnode)) {
      //第三种情况：旧前 和 新后
      console.log("3");
      patchVnode(oldStartVnode, newEndVnode);
      if (newEndVnode) newEndVnode.elm = oldStartVnode?.elm;
      //把旧前指定的节点移动到旧后指向的节点的后面
      parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling);
      oldStartVnode = oldCh[++oldStartIdx];
      newEndVnode = newCh[--newEndIdx];
    } else if (sameVnode(oldEndVnode, newStartVnode)) {
      //第四种情况：旧后 和 新前
      console.log("4");
      patchVnode(oldEndVnode, newStartVnode);
      if (newStartVnode) newStartVnode.elm = oldEndVnode?.elm;
      //将旧后指定的节点移动到旧前指向的节点的前面
      parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm);
      oldEndVnode = oldCh[--oldEndIdx];
      newStartVnode = newCh[++newStartIdx];
    } else {
      //第五种情况：以上都不满足条件 ===》查找
      console.log("5");
      //创建一个对象，存虚拟节点的（判断新旧有没有相同节点）
      const keyMap = {};
      for (let i = oldStartIdx; i <= oldEndIdx; i++) {
        const key = oldCh[i]?.key;
        if (key) keyMap[key] = i;
      }
      //在旧节点中寻找新前指向的节点
      let idxInOld = keyMap[newStartVnode.key];
      //如果有，说明数据在新旧虚拟节点中都存在
      if (idxInOld) {
        const elmMove = oldCh[idxInOld];
        patchVnode(elmMove, newStartVnode);
        //处理过的节点，在旧虚拟节点的数组中，设置为undefined
        oldCh[idxInOld] = undefined;
        parentElm.insertBefore(elmMove.elm, oldStartVnode.elm);
      } else {
        //如果没有找到==》说明是一个新的节点【创建】
        parentElm.insertBefore(createElement(newStartVnode), oldStartVnode.elm);
      }
      //新数据（指针）+1
      newStartVnode = newCh[++newStartIdx];
    }
  }
};

4.4 手写diff核心:创建和删除

src/dom/updateChildren.js:

//src/dom/updateChildren.js
import patchVnode from "./patchVnode";
import createElement from "./createElement";
//判断倆个虚拟节点是否为同一个节点
function sameVnode(vNode1, vNode2) {
  return vNode1.key == vNode2.key;
}
//参数一：真实dom节点
//参数二：旧的虚拟节点
//参数三：新的虚拟节点
export default (parentElm, oldCh, newCh) => {
  let oldStartIdx = 0; //旧前的指针
  let oldEndIdx = oldCh.length - 1; //旧后的指针
  let newStartIdx = 0; //新前的指针
  let newEndIdx = newCh.length - 1; //新后的指针

  let oldStartVnode = oldCh[0]; //旧前虚拟节点
  let oldEndVnode = oldCh[oldEndIdx]; //旧后虚拟节点
  let newStartVnode = newCh[0]; //新前虚拟节点
  let newEndVnode = newCh[newEndIdx]; //新后虚拟节点

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    ...
  }
  //下面的判断不是很严谨
  //结束while 只有俩种情况 （新增和删除）
  //1. oldStartIdx > oldEndIdx
  //2. newStartIdx > newEndIdx
  if (oldStartIdx > oldEndIdx) {
    const before = newCh[newEndIdx + 1] ? newCh[newEndIdx + 1].elm : null;
    for (let i = newStartIdx; i <= newEndIdx; i++) {
      parentElm.insertBefore(createElement(newCh[i]), before);
    }
  } else {
    //进入删除操作
    for (let i = oldStartIdx; i <= oldEndIdx; i++) {
      parentElm.removeChild(oldCh[i].elm);
    }
  }
};

测试一下：

//src/index.js
import h from "./dom/h";
import patch from "./dom/patch";

//获取到了真实的dom节点
let container = document.getElementById("container");
//获取到了按钮
let btn = document.getElementById("btn");

//虚拟节点
let vnode1 = h("ul", {}, [
  h("li", { key: "a" }, "a"),
  h("li", { key: "b" }, "b"),
  h("li", { key: "c" }, "c"),
]);

patch(container, vnode1);

let vnode2 = h("ul", {}, [
  h("li", { key: "a" }, "a"),
  h("li", { key: "b" }, "b"),
  h("li", { key: "c" }, "c"),
  h("li", { key: "d" }, "d"),
]);

btn.onclick = function () {
  patch(vnode1, vnode2);
};

页面初始：
在这里插入图片描述
点击按钮：
在这里插入图片描述

Vue 虚拟DOM和Diff算法
Huang_DW的博客
09-20 482
什么是虚拟DOM 所谓的Virtual dom，也就是我们常说的虚拟节点，它是通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM的节点。 为什么使用虚拟DOM 虚拟DOM的出现也是为了减弱频繁的大面积重绘引发的性能问题！ 既然知道了什么是虚拟DOM，那为什么在Vue或者React这样的框架中，会考虑采用这样的方式？ 其实在我们使用JQuery这样的库的时候，我们不禁会大量操作DOM，那么DOM元素的变化自然会引起页面的回流或者重绘，页面的DOM重排自然会
Vue Diff算法详解（附源码）
the_truth1的博客
12-26 1236
Vue.js 中的虚拟 DOM 通过 JavaScript 对象模拟实际 DOM 结构，提高性能。Diff 算法比对新旧虚拟 DOM 树，找出最小差异，减少实际 DOM 操作，进而提高渲染效率。
vue中的diff算法
田兴的博客
01-15 2万+
一、是什么diff算法 diff 算法是一种通过同层的树节点进行比较的高效算法 其有两个特点： 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较 diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较 二、比较方式 diff整体策略为：深度优先，同层比较 比较只会在同层级进行, 不会跨层级比较 比较的过程中，循环从两边向中间收拢 下面举个vue通过diff算法更新的例子： 新旧VNode节
Vue 的 diff 算法
最新发布
m0_51429350的博客
06-17 430
Vue 的是虚拟 DOM 更新的核心机制之一，主要用于在数据变化时高效地更新视图。它通过比较新旧两棵虚拟 DOM 树的差异，并尽可能复用已有的节点，从而提升性能。
详解vue的diff算法
weixin_34319817的博客
05-19 872
前言 目标是写一个非常详细的关于diff的干货，所以本文有点长。也会用到大量的图片以及代码举例，一起来get吧。 先来了解几个点... 1. 当数据发生变化时，vue是怎么更新节点的？ 要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能够帮助我...
vue diff算法
block_xu的博客
04-28 3735
vue diff算法 在vue中的实现原理，patch函数、patchVnode、updateChildren、sameVnode函数的介绍
Vue中的Diff算法
Hayden
03-03 2万+
Vue中的Diff算法 本篇文章主要介绍Diff算法的思想和Vue中对Diff算法的基本实现。 1. 为什么要用Diff算法 由于在浏览器中操作DOM的代价是非常“昂贵”的，所以才在Vue引入了Virtual DOM，Virtual DOM是对真实DOM的一种抽象描述，不懂的朋友可以自行查阅相关资料。 即使使用了Virtual DOM来进行真实DOM的渲染，在页面更新的时候，也不能全量地将整颗Vi...
详解vue的diff算法原理
08-27
Vue的diff算法原理详解 在本文中，我们将详细介绍 Vue 的 diff 算法原理，diff 算法是 Vue 框架中的一种关键技术，用于高效地更新虚拟 DOM 和真实 DOM。本文将从以下几个方面来介绍 diff 算法的原理： 1. 何时更新...
一文搞懂Vue Diff算法
小王的技术库
12-14 1541
简单diff算法便是拿新节点数组中的节点去旧节点数组中查找，通过key来判断是否可以复用。并记录当前的lastIdx，以此来判断节点间的相对位置是否发生变化，如果变化，需要进行移动。双端diff算法的优势在于对于一些比较特殊的情况能更快的对节点进行处理，也更贴合实际开发。而双端的含义便在于通过两组子节点的头尾分别进行比较并更新。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
Vue 中的 diff 算法
yousuotu的博客
03-25 1182
第三次循环中，发现E没有找到，这时候只能直接创建新的真实节点 E，插入到第二次创建的 C 节点之后。之间的所有节点，也就是节点F，直接创建 F 节点对应的真实节点放到 B 节点后面。后创建了 A 的真实节点，插入到前一次创建的 E 节点后面。后创建了 C 的真实节点插入到第一次创建的 D 节点后面。后创建了 B 真实节点 插入到前一次创建的 A 节点后面。第二次循环后，同样是旧节点的末尾和新节点的开头(都是 C)相同，同理，第一次循环后，发现旧节点D与新节点D相同，直接复用旧节点D作为。
vue的diff算法知识点总结
01-19
diff算法首先要明确一个概念就是diff的对象是虚拟dom，更新真实dom则是diff算法的结果 Vnode基类 constructor ( 。。。 ) { this.tag = tag this.data = data this.children = children this.text = text ...
vue 虚拟dom和diff算法详解
热门推荐
weixin_42707287的博客
03-02 3万+
虚拟dom是当前前端最流行的两个框架（vue和react）都用到的一种技术，都说他能帮助vue和react提升渲染性能，提升用户体验。那么今天我们来详细看看虚拟dom到底是个什么鬼 虚拟dom的定义与作用 什么是虚拟dom 大家一定要记住的一点就是，虚拟dom就是一个普通的js对象。是一个用来描述真实dom结构的js对象，因为他不是真实dom，所以才叫虚拟dom。 虚拟dom的结构 从下图中，我们来看一看虚拟dom结构到底是怎样的 如上图，这就是虚拟dom的结构，他是一个对象，下面有6个属性.
Vue 虚拟DOM和diff算法
qq_38211443的博客
02-07 1612
vue 中 数据改变 -> 虚拟DOM（计算变更）-> 操作DOM -> 视图更新 虚拟DOM： js执行速度比较快 什么是虚拟DOM？ 用JS模拟DOM结构 为什么需要虚拟DOM？ vue中 数据驱动视图，需要用高效方法来控制DOM操作的次数 diff算法： 虚拟DOM的核心 patch函数 两个使用场景： 首次渲染时，判断第一个参数是否是一个真实dom元素，是的话就创建空vnode，并且关联一个DOM元素，然后..
关于VUE中diff算法详解
(⊙o⊙)…
03-01 1705
一、(Diff)是什么? diff 算法是一种通过同层的树节点进行比较的高效算法 1.1. 特点： 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较 diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较 二、比较方式 2.1.diff整体策略为：深度优先，同层比较，比较只会在同层级进行, 不会跨层级比较 2.2. 比较的过程中，循环从两边向中间收拢 2.3.举例: 新旧VNo
vue的diff算法
qq_38713274的博客
03-29 290
数据变化时vue进行节点更新 问题：有时修改了某个数据，如果直接渲染到真实 DOM 上会引起整个 DOM树的重绘和重排。 解决：先根据真实 DOM 生成一颗 virtual DOM，计算 virtual DOM 中节点数据变化的部分，将该部分进行原生 DOM 操作，而不用重新渲染整个页面。 virtual DOM 用 js 对象结构表示 DOM 树的结构，然后用这个树构建一个 真正的 DOM 树，插入到文档当中。当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树的差异。把所记
Vue中的diff算法
qq_39039128的博客
02-26 413
用于打补丁（patch） 在Vue中，渲染真实dom是非常耗费性能的。 重绘就是css的颜色变化（字体颜色、背景颜色）或背景图片变化  ----repaint 重排就是dom节点的增删 宽高位置 display:none 或者是查询x轴到节点位置offsetLeft dom宽度 offsetWidth  --------reflow 重绘性能比重排好 如果直接渲染，就会渲染真实dom这棵...
面试官：了解过vue中的diff算法吗？说说看
weixin_44475093的博客
12-25 1874
一、是什么diff 算法是一种通过同层的树节点进行比较的高效算法其有两个特点：比较只会在同层级进行, 不会跨层级比较在diff比较的过程中，循环从两边向中间比较diff 算法的在很多场景...
vuejs中虚拟DOM及diff算法
m0_37716271的博客
04-23 430
虚拟DOM及diff算法 虚拟DOM（virtual dom） 用一个简单的对象去代替复杂的dom对象，存储了对应dom的一些重要参数，在改变don之前，会先比较相应虚拟dom的数据，如果需要改变，才会将改变应用到真实dom上 Diff算法（差异算法） Diff算法（差异算法）：可以用新渲染的对象树去和旧的树进行对比，记录这两棵树差异，记录下来的不同就是我们需要对页面真正的DOM操作，然后把...
深入理解Vue的diff算法
"本文详细解析了Vue的diff算法原理，探讨了Vue如何在数据变化时高效地更新DOM。文章深入浅出地介绍了虚拟DOM的概念、diff的比较策略以及patch函数的核心功能。" Vue.js是一个流行的前端JavaScript框架，它采用虚拟...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值