vue中虚拟dom干了什么Diff算法是怎么影响虚拟dom的呢

admin 报建百科 2024-04-25 167 21

虚拟 DOM 简单说就是?用JS对象来模拟 DOM 结构

举个例子：

<template>
    <div id="app" class="container">
        <h1>八级技工</h1>
    </div>
</template>

上面的模板转在虚拟 DOM 就是下面这样的，这样的 DOM 结构就称之为?虚拟 DOM?(Virtual Node)，简称?vnode。

{
  tag:'div',
  props:{ id:'app', class:'container' },
  children: [
    { tag: 'h1', children:'八级技工' }
  ]
}

Diff 算法

Diff 算法，在 Vue 里面就是叫做?patch?，通过新旧虚拟 DOM 对比(即 patch 过程)，找出变化的地方进行 DOM 更新操作

在什么时候执行的呢？

在页面首次渲染的时候会调用一次 patch 并创建新的 vnode，不会进行更深层次的比较

然后是在组件中数据发生变化时，会触发 setter 然后通过 Notify 通知 Watcher，对应的 Watcher 会通知更新并执行更新函数，它会执行 render 函数获取新的虚拟 DOM，然后执行 patch 对比上次渲染结果的老的虚拟 DOM，并计算出最小的变化，然后再去根据这个最小的变化去更新真实的 DOM，也就是视图

Diff 算法的对比方式

1. 只比较同一层级，不跨级比较

Diff 过程只会把同一层级的 DOM 进行比较

2. 比较标签名

如果同一层级的比较标签名不同，就直接移除老的虚拟 DOM 对应的节点，重新创建新的节点

3. 比较 key

如果标签名相同，key 也相同，就会认为是相同节点，也不继续按这个树状结构做深度比较，比如我们写 v-for 的时候会比较 key，不写 key 就会报错，这也就是因为 Diff 算法需要比较 key

key

li1?和?li2?不会重新渲染，这个没有争议的。而?li3、li4、li5?都会重新渲染

li3?和?li4?就不会重新渲染，因为元素内容没发生改变，对应的位置关系也没有发生改变,只是插入新的节点

总结一下：

key 的作用主要是为了更高效的更新虚拟 DOM，因为它可以非常精确的找到相同节点，因此 patch 过程会非常高效
Vue 在 patch 过程中会判断两个节点是不是相同节点时，key 是一个必要条件。比如渲染列表时，如果不写 key，Vue 在比较的时候，就可能会导致频繁更新元素，使整个 patch 过程比较低效，影响性能
应该避免使用数组下标作为 key，因为 key 值不是唯一的话可能会导致上面图中表示的 bug，使 Vue 无法区分它他，还有比如在使用相同标签元素过渡切换的时候，就会导致只替换其内部属性而不会触发过渡效果
从源码里可以知道，Vue 判断两个节点是否相同时主要判断两者的元素类型和 key 等，如果不设置 key，就可能永远认为这两个是相同节点，只能去做更新操作，就造成大量不必要的 DOM 更新操作，明显是不可取的

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!