我的编程空间,编程开发者的网络收藏夹
学习永远不晚

浅析Vue中Virtual DOM和Diff原理及实现

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

浅析Vue中Virtual DOM和Diff原理及实现

0. 写在开头

本文将秉承Talk is cheap, show me the code原则,做到文字最精简,一切交由代码说明!

1. vdom

vdom即虚拟DOM,将DOM映射为JS对象,结合diff算法更新DOM

以下为DOM

<div id="app">
  <div class="home">home</div>
</div>

映射成VDOM

{
  tag: 'div',
  attrs: {
    id: 'app'
  },
  children: [
    {
      tag: 'div',
      attrs: {
        class: 'home'
      },
      children: [
        {
          tag: undefined,
          attrs: undefined,
          text: 'home',
          children: undefined
        }
      ]
    }
  ]
}

通过这个vdom实现简单的render函数,可以通过js操作修改dom

<template>
  <div id="app">
    <div v-for="item in arr">{{ item.name }} : {{ item.id }}</div>
  </div>
  <button id="btn">reRender</button>
</template>
let app = document.getElementById('app')
let data = {
  arr: [   
    { name: 'a', id: 1 },
    { name: 'b', id: 2 },
    { name: 'c', id: 3 },
  ]
}

function render(data) {
  app.innerHtml = ''
  let children = []
  data.forEach(item => {
    let el = document.createElement("div")
    el.innerHtml = `${ item.name } : ${item.id}`
    app.appendChild(el)
  })  
}

// test
render(data.arr) // 首次渲染
let btn = document.getElementById('btn')
btn.onClick = () => {
  data.arr[2].id++ // 修改关联数据
  render(data.arr) // 重新渲染:暴力刷新DOM,没有diff,实际上只用更新最后一个div就行
}

使用snabbdom实现VDOM

snabbldom是简易实现vdom功能的库,有两个核心api:h函数和patch函数

h(tag, attrs, children) // 创建vnode
patch(vnode, newVnode) // 对vnode进行diff后挂载到真实dom上

结合hpatch实现render渲染函数

let app = document.getElementById('app')
let vnode;

function render(data) {
  let newVnode = h('div', { class: 'wrap' }, data.forEach(item => {
      return h('div', {}, `${item.name} : ${item.id}`)
    })
  )
  patch(vnode, newVnode)
  vnode = newVnode
}

render(data.arr) // 首次渲染

let btn = document.getElementById('btn')
btn.onClick = () => {
  data.arr[2].id++ // 修改关联数据
  render(data.arr) // 重新渲染:在patch函数里经过vdom的diff后再挂载到真实dom,这里只更新最后一个div
}

2. Diff

为了尽量减少DOM操作,需要通过diff对比新旧vnode,针对更改的地方进行更新DOM,而非替换整个DOM

大体思路为:

  • 对新旧两个节点调用patch函数
  • 进来先判断两个节点是否为同一类型,具体是对比keytagdata等属性
  • 若不为同一类型,那么基于新节点创建dom之后作替换
  • 若为同一类型,那么调用patchVnode函数
  • 进来先判断两个节点是文本节点的话,那么就作文本内容替换
  • 否则判断是否都有子节点,都有的话调用updateChildren函数,通过首尾四个指针对子节点数组进行diff更新;若旧节点有子节点,新节点没有,这时就删除子节点;若旧节点无子节点,新节点有,这时基于新节点创建dom作替换即可

通过createElment函数,将VDOM转为真实DOM

function createElement(vnode) {
  if(vnode.text) return document.createTextNode(vnode) // 文本节点
    
  let { tag, attrs, children } = vnode
  
  let el = document.createElement(tag) // tag
  
  for(let key of attrs){ // attrs
    el.setAttribute(key, attrs[key])
  }
  
  children.forEach(childVnode => { // children
    el.appendChild(createElement(childVnode)) 
  })
  vnode.el = el
  return el
}

通过patch函数,执行diff更新操作

判断vnodenewVnode是否为同一类型节点,是则继续递归对比子节点,否则直接替换

function patch(vnode, newVnode) {
  if (isSameNode(vnode, newVnode)) patchVnode(vnode, newVnode)
  else replaceVnode(vnode, newVnode)
}

function replaceVnode(vnode, newVnode) {
  let el = vnode.el // 旧节点
  let parentEl = api.getParentNode(el) // 获取父节点
  api.insertBefore(parentEl, createElement(newVnode), api.getNextSibling(el)) // 插入新节点
  api.removeChild(parentEl, el) // 删除旧节点
}

function isSameNode(vnode, newVnode) {
  return (
    vnode.key == newVnode.key && // key是否相同
    vnode.tag == newVnode.tag && // tag是否相同
    isDef(vnode.data) == isDef(newVnode.data) // 是否都定义了data
    // &&... 其他条件
  )
}

function patchVnode(vnode, newVnode) {
  let el = newVnode.el = vnode.el // 获取当前旧节点对应的dom,并赋值给新节点的el

  // 1.都为文本节点,且文本不一样
  if (vnode.text && newVnode.text && vnode.text != newVnode.text)
    return api.setElText(el, newVnode.text) // 替换文本
  
  let ch = vnode.children
  let newCh = newVnode.children
  if (ch && newCh) return updateChildren(el, ch, newCh) // 2.都有子节点,递归对比
  if (ch) return api.removeChild(el) // 3.vnode有子节点,newVnode无,删除子节点
  return replaceVnode(vnode, newVnode) // 4. newNode有子节点,vnode无,替换即可
}

updateChildren实现比较复杂,使用首尾四指针进行vnodenewVnode的对比

function updateChildren(el, ch, newCh) {
  // 子节点下标
  let l = 0
  let r = ch.length - 1
  let newL = 0
  let newR = newCh.length - 1

  // 子节点
  let lNode = ch[l]
  let rNode = ch[r]
  let newLNode = newCh[newL]
  let newRNode = newCh[newR]

  while (l <= r && newL <= newR) {
    if (!lNode || !rNode || !newLNode || !newRNode) { // 边界处理
      if (!lNode) lNode = ch[++l]
      if (!rNode) rNode = ch[--r]
      if (!newLNode) newLNode = newCh[++newL]
      if (!newRNode) newRNode = newCh[--newR]
      continue
    }
    
    // 新旧子节点首尾指针对比 l*newL、r*newR、l*newR、r*newL
    if (isSameNode(lNode, newLNode)) {
      patchVnode(lNode, newLNode)
      lNode = ch[++l]
      newLNode = newCh[++newL]
      continue
    }
    if (isSameNode(rNode, newRNode)) {
      patchVnode(rNode, newRNode)
      rNode = ch[--r]
      newRNode = newCh[--newR]
      continue
    }
    if (isSameNode(lNode, newRNode)) {
      patchVnode(lNode, newRNode)
      api.insertBefore(el, lNode.el, api.nextSibling(rNode.el))
      lNode = ch[++l]
      newRNode = newCh[--newR]
      continue
    }
    if (isSameNode(rNode, newLNode)) {
      patchVnode(rNode, newLNode)
      api.insertBefore(el, rNode.el, lNode.el)
      rNode = ch[--r]
      newLNode = newCh[++newL]
      continue
    }

    // 在vnode未知序列区间[l,r]生成key-idx的map表,用newLNode的key在未知序列中找到可复用的位置
    if (!keyIdxMap) keyIdxMap = getKeyIdxMap(ch, l, r) // map

    keyIdx = keyIdxMap.get(newLNode.key)
    if (!keyIdx) {
      api.insertBefore(el, createElement(newLNode), lNode.el)
    }
    else {
      let nodeToMove = ch[keyIdx]
      patchVnode(nodeToMove, newLNode)
      api.insertBefore(el, nodeToMove.el, lNode.el)
    }
    newLNode = newCh[++newL]
  }
}

function getKeyIdxMap(ch, l, r) {
  let map = new Map()
  while (l <= r) map.set(ch[l].key, l++)
  return map
}

到此这篇关于浅析Vue中Virtual DOM和Diff原理及实现的文章就介绍到这了,更多相关Vue Virtual DOM Diff内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

浅析Vue中Virtual DOM和Diff原理及实现

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

浅析Vue中Virtual DOM和Diff原理及实现

这篇文章主要为大家详细介绍了Vue中Virtual DOM和Diff原理及实现的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
2023-03-21

Vue中Virtual DOM和Diff原理及实现方法是什么

本篇内容介绍了“Vue中Virtual DOM和Diff原理及实现方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1. vdomvd
2023-07-05

Vue中的虚拟DOM和Diff算法实例分析

这篇文章主要介绍了Vue中的虚拟DOM和Diff算法实例分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中的虚拟DOM和Diff算法实例分析文章都会有所收获,下面我们一起来看看吧。简单介绍一下 虚拟DO
2023-06-29

浅析 Preact Signals 及实现原理

Preact Signals 本身在状态管理上区别于 React Hooks 上的一个点在于: Signals 本身是基于应用的状态图去做数据更新,而 Hooks 本身则是依附于 React 的组件树去进行更新。

JavaScript中的浅拷贝和深拷贝原理与实现浅析

这篇文章主要介绍了JavaScript中的浅拷贝和深拷贝原理与实现,JavaScript中的浅拷贝和深拷贝指的是在复制对象(包括对象、数组等)时,是否只复制对象的引用地址或者在复制时创建一个新的对象
2023-05-17

浅析Redis中红锁RedLock的实现原理

RedLock是一个分布式锁服务,通过同时向多个Redis实例发送请求来获取锁。如果从超过一半的实例获取了抢险值,则客户端成功获取锁。RedLock的优点包括高容错性、可扩展性和轻量级。缺点是网络开销、复杂性和受最慢实例性能影响。RedLock适用于需要高容错性互斥锁的分布式系统,如分布式缓存排他访问和数据库并发控制。
浅析Redis中红锁RedLock的实现原理
2024-04-02

深入浅析java 中HashMap的实现原理

这篇文章将为大家详细讲解有关深入浅析java 中HashMap的实现原理,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1. HashMap的数据结构数据结构中有数组和链表来实现对数据的存储,
2023-05-31

浅谈express 中间件机制及实现原理

简介中间件机制可以让我们在一个给定的流程中添加一个处理步骤,从而对这个流程的输入或者输出产生影响,或者产生一些中作用、状态,或者拦截这个流程。中间件机制和tomcat的过滤器类似,这两者都属于责任链模式的具体实现。 express 中间件使
2022-06-04

浅谈Java中的atomic包实现原理及应用

1.同步问题的提出假设我们使用一个双核处理器执行A和B两个线程,核1执行A线程,而核2执行B线程,这两个线程现在都要对名为obj的对象的成员变量i进行加1操作,假设i的初始值为0,理论上两个线程运行后i的值应该变成2,但实际上很有可能结果为
2023-05-30

GoResiliency库中timeout实现原理及源码解析

Go-Resiliency库中的timeout是一种基于协程的超时机制,通过创建协程来执行任务并设置超时时间,若任务执行时间超时则中止协程并返回错误,需要详细了解可以参考下文
2023-05-19

Vue中Watcher和Scheduler的实现原理是什么

这篇文章主要介绍“Vue中Watcher和Scheduler的实现原理是什么”,在日常操作中,相信很多人在Vue中Watcher和Scheduler的实现原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答
2023-06-21

vue中路由的两种模式以及实现原理

Vue.js 是一种流行的前端框架,通过其优秀的路由管理模块实现了单页应用(Single-page Application,SPA)的开发。Vue 路由管理模块(Vue Router)具有两种模式:历史模式(History mode)和哈希模式(Hash mode)。在本文中,我们将详细介绍这两种模式的实现原理,以及如何在 Vue 中使用它们。一、路由模式的概念在传统的多页应用
2023-05-23

详解Vue中双向绑定原理及简单实现

这篇文章主要为大家详细介绍了Vue中双向绑定原理及简单实现,文中的示例代码讲解详细,对我们深入了解Vue有一定的帮助,需要的可以参考一下
2023-05-19

编程热搜

目录