Vue2 手写 diff 算法及 Vue3 的对比与扩展

最新推荐文章于 2024-11-26 19:00:40 发布

阿贾克斯的黎明

最新推荐文章于 2024-11-26 19:00:40 发布

阅读量646

点赞数 8

分类专栏：前端文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_57836225/article/details/142796365

版权

前端专栏收录该内容

149 篇文章 1 订阅

订阅专栏

Vue2 手写 diff 算法及 Vue3 的对比与扩展

在前端开发中，理解和掌握虚拟 DOM（Virtual DOM）的 diff 算法对于优化应用性能至关重要。本文将详细介绍 Vue2 中手写 diff 算法的过程，并探讨在 Vue3 中的情况及代码差异。

一、Vue2 中的 diff 算法实现

1. 准备工作

通过上节课的理论学习，我们大致了解了 diff 算法中各种条件的判断。现在要通过代码实现，但在实现之前，我们需要解决一些问题。
虚拟节点没有加入K属性，这会导致性能问题，因为没有K时会进行暴力的删除和添加操作。所以我们为虚拟节点加上K属性，比如K为A、B、C、D。
修改之前的代码，确保相同节点的ELM能够正确添加。将代码中的部分结构改为UL和LI的形式，以便更好地进行测试。

2. 参数传递与指针设置

创建一个函数updateChildren，它接收三个参数：旧节点的真实 DOM 节点elm、旧的虚拟节点oldVNode、新的虚拟节点newVNode以及它们对应的子节点数组oldChildren和newChildren。
设置四个指针oldStartIdx（旧前指针）、oldEndIdx（旧后指针）、newStartIdx（新前指针）、newEndIdx（新后指针），分别指向旧节点和新节点的子节点数组的起始和结束位置。

3. 循环与条件判断

进入循环，循环条件为oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx。
在循环中，判断四种情况：
- 第一种情况：旧前和新前的虚拟节点K属性相同，代表它们是同一个节点。此时调用patchVNode将旧前和新前的虚拟节点进行对比和处理，然后将指针指向下一个数据，即oldStartIdx++和newStartIdx++。
- 第二种情况：旧后和新后的虚拟节点K属性相同。处理方式与第一种情况类似，只是指针的移动方向是从后往前，即oldEndIdx--和newEndIdx--。
- 第三种情况：旧前和新后的虚拟节点K属性相同，需要移动位置。将旧前指定的节点移动到旧后指向的节点的后面，并调整指针oldStartIdx++和newEndIdx--。
- 第四种情况：旧后和新前的虚拟节点K属性相同。将旧后指定的节点移动到旧前指向的节点的前面，并调整指针oldEndIdx--和newStartIdx++。

二、Vue3 中的 diff 算法变化

在 Vue3 中，diff 算法进行了一些优化和改进。

1. 静态提升

Vue3 对静态节点进行了提升，在首次渲染时，会将静态节点的创建过程缓存起来，在后续的更新中，如果静态节点没有发生变化，就直接复用，避免了重复创建的开销。

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue 3!'
    };
  },
  render() {
    return h('div', [
      h('p', '静态文本，不会频繁变化'),
      h('p', this.message)
    ]);
  }
});

在上面的代码中，第一个p标签中的静态文本在后续的更新中如果没有变化，就会被静态提升。

2. 事件侦听器缓存

Vue3 对事件侦听器也进行了缓存。在更新过程中，如果事件侦听器没有变化，就直接复用，避免了重复绑定的开销。

const app = Vue.createApp({
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  render() {
    return h('button', { onClick: this.increment }, 'Increment');
  }
});

在上面的代码中，按钮的点击事件侦听器在更新过程中如果没有变化，就会被缓存起来。

3. 优化的 diff 策略

Vue3 的 diff 算法在比较新旧虚拟 DOM 时，采用了更加高效的策略。例如，对于相同类型的元素，只比较它们的属性变化，而不是像 Vue2 那样对整个元素进行比较。

const app = Vue.createApp({
  data() {
    return {
      style: { color: 'red' }
    };
  },
  render() {
    return h('div', { style: this.style });
  }
});

在上面的代码中，如果style对象中的属性发生变化，Vue3 的 diff 算法只会比较变化的属性，而不是整个style对象。