AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue源码之虚拟DOM和diff算法(一) 使用snabbdom

2022-06-25 157
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue源码之虚拟DOM和diff算法(一) 使用snabbdom
前言：如果这篇文章 对你有帮助，请不要吝啬你的赞。😃

什么是虚拟DOM和diff算法

diff算法简介

image-20220317115218615

要把左图装修成右图的样子。(哪里不同？仔细找)

有两种方案。

方案一：拆掉重建(效率低，代价大)

方案二：diff(精细化比对，最小量更新)


怎么看都应该会选择方案二。


那么在Vue中使用 diff的情景呢?

image-20220317121207880

上图就是在Vue中使用 diff的情景(比如左图中，有一些元素的 v-if为false，所以不显示，而右图中， v-if为 true)


虚拟DOM简介

虚拟DOM：用来描述DOM的层次结构的js对象。真实DOM中的一切属性在虚拟DOM中都存在。

image-20220317121849612

diff是发生在虚拟DOM上的

image-20220317154226660

优点：

  • 减少对真实DOM的操作
  • 虚拟 DOM 本质上是 JavaScript 对象，可以跨平台，比如服务器渲染等


snabbdom

snabbdom仓库

snabbdom是著名的虚拟DOM库，是diff算法的鼻祖。(Vue源码也借鉴了 snabbdom)

安装

npm install snabbdom

webpack配置

上一篇中，有 webpack配置可查看Vue源码系列的上一篇文章。

webpack.config.js

const path = require('path');

module.exports = {
  entry: path.join(__dirname, 'src', 'index.js'),
  mode: 'development',
  output: {
    filename: 'bundle.js',
    // 虚拟打包路径，bundle.js文件没有真正的生成
    publicPath: "/virtual/"
  },

  devServer: {
    // 静态文件根目录
    static: path.join(__dirname, 'www'),
    // 不压缩
    compress: false,
    port: 8080,
  }
}


h函数使用

h函数用来创建虚拟节点(vnode)

image-20220317154552800

参数介绍：

  • 第一个参数：是生成的虚拟节点对应DOM节点的标签名
  • 第二个参数：一个对象，虚拟节点的属性(可选)
  • 第三个参数：标签中的内容

h函数体验

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


const myVnode = h('a', {
  props: {
    href: 'https://clz.vercel.app'
  }
}, '赤蓝紫')

console.log(myVnode)

image-20220317155922806


虚拟DOM节点属性介绍：

  • children: 子元素，没有则为 undefined
  • data(对象形式): 类名、属性、样式、事件(对象形式)
  • elm: 对应的真实DOM节点(如果没有对应的，则为undefined )
  • key：唯一标识
  • sel：选择器
  • text：文字


搭配 patch函数生成真实DOM节点

通过引入的 init函数把所有的模块(类名模块、属性模块、样式模块、事件监听模块)作为参数(少的话，则上树后也会少，比如少事件监听模块，上树后，事件将不再生效)

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


container只是占位符，上树后会消失

// container只是占位符，上树后会消失
const container = document.getElementById('container')
patch(container, myVnode)    // 上树(第一个参数如果不是虚拟节点，则是执行上树操作，否则是diff算法，第一个参数是旧虚拟节点，第二个参数是新虚拟节点)


完整版

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

// 加载模块，，创建出patch函数。没有对应模块的话，上树后，也对应没有。比如少事件监听模块，上树后，事件将不再生效
// 类名模块、属性模块、样式模块、事件监听模块
const patch = init([classModule, propsModule, styleModule, eventListenersModule])


const myVnode = h('button', {
  class: {            // 类名
    "btn": true
  },
  props: {            // 属性, id也在这里面
    id: 'btn',
    title: '赤蓝紫'
  },
  style: {          // 样式
    backgroundColor: 'red',
    border: 0,
    color: '#fff',
  },
  on: {             // 事件监听
    click: function () {
      location.assign('https://clz.vercel.app')
    }
  }
}, '赤蓝紫')

console.log(myVnode)

// container只是占位符，上树后会消失
const container = document.getElementById('container')
patch(container, myVnode)     // 上树


h函数嵌套使用

h函数可以嵌套使用，从而得到虚拟DOM树

image-20220317174152025


动手实践

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


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


const myVnode = h('ul', [     // 没有数据参数
  h('li', '赤'),        // 可以没有数据参数
  h('li', {}, '蓝'),    // 数据参数可为空
  h('li', h('span', '紫'))     // 内容参数为调用h函数且只有一个时，可以不是数组形式
])

console.log(myVnode)


const container = document.getElementById('container')
patch(container, myVnode)

image-20220317174911551


手写h函数

编写vnode函数

vnode功能：把传入的参数组合成对象后返回

src \ mysnabbdom \ vnode.js

export default function (sel, data, children, text, elm) {
  return {
    sel,
    data,
    children,
    text,
    elm
  }
}


本次手写的是低配版本的h函数，必须接收3个参数

调用可以有以下三种形式

  1. h('div', {}, '文字')
  2. h('div', {}, [])
  3. h('div', {}, h())


实现第一种形式

直接调用 vnode函数，返回即可

src \ mysnabbdom \ h.js

import vnode from './vnode.js'

export default function (sel, data, content) {
  if (arguments.length !== 3) {
    throw new Error('这是低配版h函数, 必须接收3个参数')
  } else if (typeof content === 'string' || typeof content === 'number') {
    // 形式1
    return vnode(sel, data, undefined, content, undefined)
  } else if (Array.isArray(content)) {
    // 形式2
  } else if (typeof c === 'object' && c.hasOwnProperty('sel')) {
    // 形式3：因为h函数最终会返回一个一定会有`sel`属性的对象

  } else {
    throw new Error('传入的第三个参数类型不对')
  }
}


测试

src \ index.js

import h from './mysnabbdom/h.js'

console.log(h('div', {}, '文字'))

image-20220317230452293


实现第二种形式

src \ mysnabbdom \ h.js

import vnode from './vnode.js'


export default function (sel, data, content) {
  if (arguments.length !== 3) {
    throw new Error('这是低配版h函数, 必须接收3个参数')
  } else if (typeof content === 'string' || typeof content === 'number') {
    // 形式1
    return vnode(sel, data, undefined, content, undefined)
  } else if (Array.isArray(content)) {
    // 形式2
    const children = []

    for (let i = 0; i < content.length; i++) {
      if (!(typeof content[i] === 'object' && content[i].hasOwnProperty('sel'))) {
        throw new Error('传入的数组中又有不是调用h函数的')
      }

      children.push(content[i])      // 因为传的数组里的元素就是调用h函数的，即得到的已经是处理过后返回的对象了
    }

    return vnode(sel, data, children, undefined, undefined)
  } else if (typeof content === 'object' && content.hasOwnProperty('sel')) {
    // 形式3：因为h函数最终会返回一个一定会有`sel`属性的对象

  } else {
    throw new Error('传入的第三个参数类型不对')
  }
}


测试

src \ index.js

import h from './mysnabbdom/h.js'

console.log(h('div', {}, [
  h('p', {}, '赤'),
  h('p', {}, '蓝'),
  h('p', {}, '紫'),
  h('p', {}, [
    h('span', {}, '黑'),
    h('span', {}, '白')
  ])
]))

image-20220317230809710

第三种形式

src \ mysnabbdom \ h.js

/*
 * 低配版本的h函数，必须接收3个参数
 * 调用可以有以下三种形式
 * 1. h('div', {}, '文字')
 * 2. h('div', {}, [])
 * 3. h('div', {}, h())
*/

import { h } from 'snabbdom'
import vnode from './vnode.js'


export default function (sel, data, content) {
  if (arguments.length !== 3) {
    throw new Error('这是低配版h函数, 必须接收3个参数')
  } else if (typeof content === 'string' || typeof content === 'number') {
    // 形式1
    return vnode(sel, data, undefined, content, undefined)
  } else if (Array.isArray(content)) {
    // 形式2
    const children = []

    for (let i = 0; i < content.length; i++) {
      if (!(typeof content[i] === 'object' && content[i].hasOwnProperty('sel'))) {
        throw new Error('传入的数组中又有不是调用h函数的')
      }

      children.push(content[i])      // 因为传的数组里的元素就是调用h函数的，即得到的已经是处理过后返回的对象了
    }

    return vnode(sel, data, children, undefined, undefined)
  } else if (typeof content === 'object' && content.hasOwnProperty('sel')) {
    // 形式3：因为h函数最终会返回一个一定会有`sel`属性的对象

    return vnode(sel, data, [content], undefined, undefined)    //把它当成只有一个元素的数组来处理

  } else {
    throw new Error('传入的第三个参数类型不对')
  }
}

测试

src \ index.js

import h from './mysnabbdom/h.js'

console.log(h('div', {}, h('span', {}, '赤蓝紫')))

image-20220317232336683

diff算法初体验

在后面插入

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

// 加载模块，创建出patch函数。没有对应模块的话，上树后，也对应没有。比如少事件监听模块，上树后，事件将不再生效
// 类名模块、属性模块、样式模块、事件监听模块
const patch = init([classModule, propsModule, styleModule, eventListenersModule])


const myVnode1 = h('ul', {}, [
  h('li', {}, 'a'),
  h('li', {}, 'b'),
  h('li', {}, 'c'),
  h('li', {}, 'd'),
])
const myVnode2 = h('ul', {}, [
  h('li', {}, 'a'),
  h('li', {}, 'b'),
  h('li', {}, 'c'),
  h('li', {}, 'd'),
  h('li', {}, 'e')
])

const container = document.getElementById('container')
patch(container, myVnode1)     // 上树
const btn = document.getElementById('btn')
btn.addEventListener('click', function () {
  patch(myVnode1, myVnode2)     // 点击后，从myVnode1变为myVnode2
})

diff


怎么知道是不是真的是最小量更新呢?

可以用老师用的巧妙法：在 DevTools的 Elements面板修改内容，查看有没有变化

diff

可以发现，确确实实是最小量更新。仔细看上面的图，发现不需要修改 Elements面板，有更新的话，会变紫，闪烁一下


在前面插入

那么，接下来就试一下在开头加入新节点的情况咯

const myVnode2 = h('ul', {}, [
  h('li', {}, 'e'),
  h('li', {}, 'a'),
  h('li', {}, 'b'),
  h('li', {}, 'c'),
  h('li', {}, 'd')
])

diff

可以说是，上面的情况压根就不是最小量更新。

这是为什么呢？这时候就需要 key的闪亮登场了

没有key的时候：会先把节点插到最后，再把插入的节点移动到要去的位置，其他节点也需要移动到要去的位置


在中间插入

可以再来测试一下

const myVnode2 = h('ul', {}, [
  h('li', {}, 'a'),
  h('li', {}, 'e'),
  h('li', {}, 'b'),
  h('li', {}, 'c'),
  h('li', {}, 'd')
])

这时候，只有a不会变化，因为e插入的位置不会影响到a


使用key，真正实现最小量更新

有 key的时候，就不一样了，每一个虚拟节点都有一个唯一标识，所以能够精准定位，真正实现最小化更新

const myVnode1 = h('ul', {}, [
  h('li', { key: 'a' }, 'a'),
  h('li', { key: 'b' }, 'b'),
  h('li', { key: 'c' }, 'c'),
  h('li', { key: 'd' }, 'd'),
])
const myVnode2 = h('ul', {}, [
  h('li', { key: 'e' }, 'e'),
  h('li', { key: 'a' }, 'a'),
  h('li', { key: 'b' }, 'b'),
  h('li', { key: 'c' }, 'c'),
  h('li', { key: 'd' }, 'd')
])

diff


使用key，并完全调换位置

const myVnode1 = h('ul', {}, [
  h('li', { key: 'a' }, 'a'),
  h('li', { key: 'b' }, 'b'),
  h('li', { key: 'c' }, 'c'),
  h('li', { key: 'd' }, 'd'),
])
const myVnode2 = h('ul', {}, [
  h('li', { key: 'd' }, 'd'),
  h('li', { key: 'a' }, 'a'),
  h('li', { key: 'e' }, 'e'),
  h('li', { key: 'b' }, 'b'),
  h('li', { key: 'c' }, 'c'),
])

diff

还是最小量更新。另外，闪烁法还是不太可靠，建议还是修改Element法


总结

  • 最小量更新：需要key， key是节点的唯一标识，用于告诉 diff算法，在更改前后是同一个DOM节点

  • 只有是同一个虚拟节点，才会进行精细化比较，否则就是暴力删除旧的、插入新的。如上面的例子中，从 ul变为 ol

    同一个虚拟节点：选择器相同且 key相同

    // 供测试用：可以使用回上面说的修改Elemens面板法(不过，下面的例子实际开发遇到的可能性很小)

const myVnode1 = h('ul', { key: 'ul1' }, [
h('li', { key: 'a' }, 'a'),
h('li', { key: 'b' }, 'b'),
h('li', { key: 'c' }, 'c'),
h('li', { key: 'd' }, 'd'),
])
const myVnode2 = h('ul', { key: 'ul2' }, [
h('li', { key: 'e' }, 'e'),
h('li', { key: 'a' }, 'a'),
h('li', { key: 'b' }, 'b'),
h('li', { key: 'c' }, 'c'),
h('li', { key: 'd' }, 'd')
])

  • 只进行同层比较，不进行跨层比较。如果跨层了，则依然是暴力删除旧的，然后插入新的

    // 下面的例子实际开发遇到的可能性很小
const myVnode1 = h('div', { key: 'box' }, [
  h('p', { key: 'a' }, 'a'),
  h('p', { key: 'b' }, 'b'),
  h('p', { key: 'c' }, 'c'),
  h('p', { key: 'd' }, 'd'),
])
const myVnode2 = h('div', { key: 'box' },
  h('section', { key: 'section' }, [
    h('p', { key: 'e' }, 'e'),
    h('p', { key: 'a' }, 'a'),
    h('p', { key: 'b' }, 'b'),
    h('p', { key: 'c' }, 'c'),
    h('p', { key: 'd' }, 'd')
  ])
)

    diff

文章标签：
JavaScript
前端开发
容器
算法
关键词：
算法源码
vue算法
diff算法
vue diff算法
vue dom
赤蓝紫
目录
相关文章
ephemerals__
|
16天前
|
搜索推荐 算法 C语言
【排序算法】八大排序（上）（c语言实现）（附源码）
本文介绍了四种常见的排序算法：冒泡排序、选择排序、插入排序和希尔排序。通过具体的代码实现和测试数据，详细解释了每种算法的工作原理和性能特点。冒泡排序通过不断交换相邻元素来排序，选择排序通过选择最小元素进行交换，插入排序通过逐步插入元素到已排序部分，而希尔排序则是插入排序的改进版，通过预排序使数据更接近有序，从而提高效率。文章最后总结了这四种算法的空间和时间复杂度，以及它们的稳定性。
ephemerals__
62 8
ephemerals__
|
16天前
|
搜索推荐 算法 C语言
【排序算法】八大排序（下）（c语言实现）（附源码）
本文继续学习并实现了八大排序算法中的后四种：堆排序、快速排序、归并排序和计数排序。详细介绍了每种排序算法的原理、步骤和代码实现，并通过测试数据展示了它们的性能表现。堆排序利用堆的特性进行排序，快速排序通过递归和多种划分方法实现高效排序，归并排序通过分治法将问题分解后再合并，计数排序则通过统计每个元素的出现次数实现非比较排序。最后，文章还对比了这些排序算法在处理一百万个整形数据时的运行时间，帮助读者了解不同算法的优劣。
ephemerals__
51 7
mao29955
|
1月前
|
算法 JavaScript UED
Diff 算法的实现原理
【10月更文挑战第18天】Diff 算法是 Vue.js 中实现高效 DOM 更新的核心机制，通过合理的比较和优化策略，能够在保证界面正确性的同时，最大程度地减少 DOM 操作，提高应用的性能和用户体验。
mao29955
28 2
mao29955
|
1月前
|
算法 JavaScript
Vue 中的 Diff 算法
【10月更文挑战第18天】需要注意的是，Diff 算法虽然能够提高性能，但在某些复杂的场景下，可能仍然会存在一些性能瓶颈。因此，在实际开发中，我们需要根据具体情况合理地使用 Diff 算法，并结合其他优化手段来提高应用的性能。
mao29955
14 1
那年春天
|
1月前
|
JavaScript 算法 前端开发
vue 中diff算法
【10月更文挑战第10天】
那年春天
30 1
游客zi3qmblbcdexu
|
1月前
|
JavaScript 算法 前端开发
【VUE】Vue的diff算法和React的diff算法
【VUE】Vue的diff算法和React的diff算法
游客zi3qmblbcdexu
52 2
dream_ready
|
1月前
|
存储 算法 安全
ArrayList简介及使用全方位手把手教学(带源码)，用ArrayList实现洗牌算法，3个人轮流拿牌(带全部源码)
文章全面介绍了Java中ArrayList的使用方法，包括其构造方法、常见操作、遍历方式、扩容机制，并展示了如何使用ArrayList实现洗牌算法的实例。
dream_ready
19 0
游客44yag4ft7nckq
|
1月前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
34 6
游客44yag4ft7nckq
|
1月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中，文档中的所有内容都被视为节点。整个文档是一个文档节点，每个 HTML 元素是元素节点，元素内的文本是文本节点，属性是属性节点，注释是注释节点。DOM 将文档表示为节点树，节点之间有父子和同胞关系。
游客44yag4ft7nckq
22 3
游客44yag4ft7nckq
|
1月前
|
JavaScript
HTML DOM 节点
HTML DOM（文档对象模型）将HTML文档视为节点树，其中每个部分都是节点：文档本身是文档节点，HTML元素是元素节点，元素内的文本是文本节点，属性是属性节点，注释是注释节点。节点间存在父子及同胞关系，形成层次结构。
游客44yag4ft7nckq
30 3

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    Vue报错Interpolation inside attributes has been removed.解决方法
  • 4
    自制简单的range（Vue）
  • 5
    简单vue父子iframe页面之间跨域通信传值postMessage()
  • 6
    如何在VUE中播放RTSP 实时视频，延迟要小于300毫秒？
  • 7
    VueJS && ReactJS 如何？听听别人怎么说。
  • 8
    使用webstorm来创建并且运行vue项目详细教程
  • 9
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 10
    vue2与vue3的区别
  • 1
    XML DOM 解析器
    56
  • 2
    XML DOM - 属性和方法
    45
  • 3
    JavaScript 提供了多种方法来操作 DOM（文档对象模型）
    47
  • 4
    DOM 节点列表长度（Node List Length）
    34
  • 5
    XML DOM 解析器
    33
  • 6
    Beautiful Soup 库的工作原理基于解析器和 DOM（文档对象模型）树的概念
    79
  • 7
    XML DOM 解析器
    38
  • 8
    XML DOM 节点信息
    41
  • 9
    React中的DOM diff算法是如何工作的
    54
  • 10
    为什么需要key，dom diff
    39

    • 相关课程

    更多
  • 相册服务中的故事生成算法介绍
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Go语言核心编程 - 数据结构和算法
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • 神经网络概览及算法详解

    • 相关电子书

    更多
  • 【云栖精选7月刊】抛开晦涩的算法、模型，让我们来谈谈互联网架构
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 使用Swing算法实现商品推荐
  • 前端开发基础6：Node.js和LESS预编译工具
  • RSA密码算法设计与实现
  • 欧拉图的构造性证明与算法实现
  • 推荐系统入门之使用ALS算法实现打分预测
  • 搭建Node.js编程环境
    • 下一篇
    无影云桌面