Vue 3.3 和 3.5 在性能优化上的一个关键区别

我是天龙_绍
300 阅读4分钟

这是一个非常棒的 Vue.js 深层原理和版本差异的讲解！

清晰地梳理了 computed 和 watch 的工作原理，

以及 Vue 3.3 和 3.5 在性能优化上的一个关键区别。

把核心逻辑和优化点再提炼总结一下，方便大家理解。

核心原理回顾：Computed 的执行时机

  1. 惰性求值：computed 的回调函数不会立即执行，只有在被读取（访问 .value） 时才会执行。
  2. 缓存机制：computed 具有缓存。它的执行需要满足两个条件：
    • 条件一：被读取（.value 被访问）。
    • 条件二：是“脏数据”（isDirty 为 true）。
    • 只有两个条件同时满足，回调才会重新执行以获取新值。

isDirty 变为 true 的三种情况：

  • 初始化后：刚创建时，没有缓存，自然是脏的。
  • 读取后：执行完回调，获得缓存，isDirty 设为 false。
  • 依赖变化：computed 内部依赖的响应式数据（如 state.a, state.b）发生变化时，会标记该 computed 为脏（isDirty = true），使缓存失效。

Vue 3.3 的行为分析

对于代码：

state.a++;
state.b--;

在 Vue 3.3 中，执行流程如下：

  1. 初始依赖收集：
    • watch 回调首次执行，打印 'watch sum'。
    • 内部读取 sum.value，触发 computed 回调执行（因为初始是脏数据），打印 'computed'。
    • 此时，watch 回调与 sum.value 建立了依赖关系。
  2. 触发更新：
    • state.a++ 和 state.b-- 触发 sum 的依赖更新。
    • sum 被标记为脏（isDirty = true），并通知所有依赖它的效果（effect）——这里就是 watch 的回调。
  3. 重新执行：
    • watch 的回调被再次执行，打印 'watch sum'。
    • 回调内部再次读取 sum.value。
    • 由于 sum 是脏的，computed 回调再次执行，打印 'computed'。
    • 对比新旧值，如果变化了，则执行 watch 的副作用回调，打印 'watch sum changed'。

Vue 3.3 的问题：即使 state.a++ 和 state.b-- 之后，sum 的值（a + b）实际上并没有改变，但整个 watch 回调依然被重新执行了。这是一种不必要的性能开销。

import { computed, reactive } from 'vue3-3';

const state = reactive({
  a: 0,
  b: 0,
});

const sum = computed(() => {
  console.log('computed');
  return state.a + state.b;
});

watch(() => {
  console.log('watch sum');
  return sum.value;
},() => {
  console.log('两次结果不一样就执行我')
})

state.a++;

watch sum
computed
watch sum
computed
两次结果不一样就执行我

Vue 3.5 的优化

Vue 3.5 引入了一个关键的优化步骤：在触发效果（如 watch 回调）重新运行之前，会先“刷新”其依赖的 computed 值。

优化后的流程（前两步相同）：

  1. 初始依赖收集：（同上）打印 'watch sum' 和 'computed'。
  2. 触发更新：（同上）sum 被标记为脏。
  3. 优化检查：
    • 在真正执行 watch 回调之前，Vue 会先主动刷新它依赖的 computed 值（即 sum）。
    • 由于 sum 是脏的，computed 回调在此刻执行，打印 'computed'。
    • Vue 获取到新的 sum.value，并与旧值进行比较。
  4. 决定是否执行：
    • 如果值没变（如本例 a+b 结果不变）：Vue 会跳过整个 watch 回调的执行（包括依赖重新收集）。因为依赖的数据没变，副作用自然不需要运行。
    • 如果值变了：则正常执行 watch 回调。

所以，在 Vue 3.5 中，当 a+b 结果不变时，你只会看到一次 'computed' 的打印（优化检查阶段执行的），而不会看到第二次的 'watch sum'。

import { computed, reactive } from 'vue3-5';

const state = reactive({
  a: 0,
  b: 0,
});

const sum = computed(() => {
  console.log('computed');
  return state.a + state.b;
});

watch(() => {
  console.log('watch sum');
  return sum.value;
},() => {
  console.log('两次结果不一样就执行我')
})

state.a++;

watch sum
computed
computed
watch sum
两次结果不一样就执行我

总结：优化了什么？

特性Vue 3.3 及以前Vue 3.5（优化后）
执行逻辑依赖的 computed 变脏 -> 直接重新运行 watch 回调。依赖的 computed 变脏 -> 先刷新 computed 值 -> 比较值是否变化 -> 再决定是否运行 watch 回调。
性能提升即使最终计算结果未变，watch 回调及其内部的依赖收集过程也会完整执行一遍。避免了在 computed 值实际未变化时，watch 回调的无效执行和依赖重新收集，提升了性能。
执行顺序watch 回调在 computed 回调之前触发。在特定情况下（如值不变），computed 回调可能在 watch 回调原本应该执行的时间点之前触发。

这个优化对于依赖复杂 computed 的 watch 来说，能有效避免不必要的组件重新渲染或逻辑执行，是框架层面一个非常细腻和实用的改进。

这个案例是理解 Vue 响应式系统深度优化的绝佳例子！

avatar
文章
阅读
粉丝