Vue中的响应性粒度优化：使用`shallowRef`与`markRaw`减少依赖追踪开销

Vue 中的响应性粒度优化：使用 shallowRef 与 markRaw 减少依赖追踪开销

大家好，今天我们来深入探讨 Vue 3 中两种强大的响应性 API：shallowRef 和 markRaw。它们是优化 Vue 应用性能，特别是处理大型数据结构或外部库对象时，不可或缺的工具。我们的重点在于理解它们的原理，适用场景，以及如何有效地利用它们来减少不必要的依赖追踪开销，从而提升应用的整体性能。

理解 Vue 的响应式系统

在深入 shallowRef 和 markRaw 之前，我们需要对 Vue 的响应式系统有一个清晰的认识。Vue 的核心理念之一是数据驱动视图，即当数据发生变化时，视图会自动更新。 为了实现这一点，Vue 使用了一个精妙的响应式系统。

简单来说，当我们将一个 JavaScript 对象传递给 reactive 函数 (或使用 Composition API 中的 ref 函数)，Vue 会递归地遍历这个对象的所有属性，并使用 Proxy 对它们进行包装。 Proxy 允许 Vue 拦截对这些属性的读取和修改操作。

• 读取 (Get)： 当我们在模板或计算属性中访问响应式对象的属性时，Vue 会记录这个组件或计算属性“依赖”于该属性。
• 修改 (Set)： 当我们修改响应式对象的属性时，Vue 会通知所有依赖于该属性的组件或计算属性，触发它们重新渲染或重新计算。

这种机制非常强大，但也存在一些潜在的性能问题。特别是当处理以下情况时：

1. 大型数据结构： 如果一个对象包含大量的属性，那么 Vue 需要对所有属性进行 Proxy 包装，这会消耗大量的内存和 CPU 资源。
2. 不需要响应式的属性： 有些对象的某些属性实际上不需要是响应式的。例如，来自第三方库的对象，或者一些配置数据。 对这些属性进行响应式处理只会增加额外的开销，而没有任何好处。
3. 深层嵌套的对象： reactive 会递归地将对象的所有嵌套属性都变成响应式的。如果对象嵌套很深，这个过程会非常耗时。

这就是 shallowRef 和 markRaw 派上用场的地方。它们允许我们更精细地控制 Vue 的响应式行为，从而避免不必要的开销。

shallowRef: 浅层响应式引用

shallowRef 创建一个浅层响应式引用。与 ref 不同，shallowRef 只会对 .value 属性进行响应式追踪。这意味着，当 .value 指向一个新的对象时，会触发更新。但是，如果 .value 指向的对象内部的属性发生变化，则不会触发更新。

语法：

import { shallowRef } from 'vue';

const myRef = shallowRef(initialValue);

示例：

<template>
  <div>
    <p>Name: {{ person.name }}</p>
    <p>Age: {{ person.age }}</p>
    <button @click="updatePerson">Update Person</button>
  </div>
</template>

<script setup>
import { shallowRef } from 'vue';

const person = shallowRef({
  name: 'Alice',
  age: 30,
});

const updatePerson = () => {
  // 这会触发更新，因为 person.value 指向了一个新的对象
  person.value = {
    name: 'Bob',
    age: 35,
  };

  // 这不会触发更新，因为 person.value 指向的对象没有改变
  // person.value.name = 'Charlie'; // 错误！不会触发更新
};
</script>

适用场景：

• 大型对象，只需要替换整个对象时才触发更新： 例如，从 API 获取数据后，将整个数据对象替换掉。
• 性能敏感的场景： 当需要避免对对象内部属性的深度追踪时，可以使用 shallowRef 来减少开销。

对比 ref 和 shallowRef:

特性	ref	shallowRef
响应式深度	深层响应式 (递归追踪所有属性)	浅层响应式 (只追踪 .value 属性)
触发更新	对象及其内部属性的变化都会触发更新	只有当 .value 指向新的对象时才触发更新
适用场景	需要对对象内部属性进行响应式追踪时	只需要替换整个对象时才触发更新时
性能	性能开销较大	性能开销较小

使用注意事项：

• 使用 shallowRef 时，需要特别小心地处理对象内部属性的修改。如果需要修改对象内部属性，并且希望触发更新，可以使用 reactive 或 ref 来包装整个对象，或者手动触发更新 (例如，使用 forceUpdate)。
• shallowRef 通常与不可变数据模式结合使用，即每次修改数据时，都创建一个新的对象，而不是修改现有的对象。

markRaw: 标记为原始对象，跳过响应式追踪

markRaw 用于将一个对象标记为原始对象。被标记为原始对象的对象，将不会被 Vue 的响应式系统追踪。这意味着，对该对象及其属性的修改，不会触发任何更新。

语法：

import { markRaw } from 'vue';

const myObject = markRaw(object);

示例：

<template>
  <div>
    <p>Name: {{ person.name }}</p>
    <p>Age: {{ person.age }}</p>
    <button @click="updatePerson">Update Person</button>
  </div>
</template>

<script setup>
import { markRaw, reactive } from 'vue';

const person = reactive(markRaw({ // 注意这里 reactive 包裹了 markRaw 的对象
  name: 'Alice',
  age: 30,
}));

const updatePerson = () => {
  // 这不会触发更新，因为 person 被 markRaw 标记了
  person.name = 'Bob'; // 不会触发更新
  person.age = 35;   // 不会触发更新

  console.log(person.name) // Bob
  console.log(person.age)  // 35
};
</script>

适用场景：

• 与第三方库集成的对象： 例如，使用 axios 获取的数据，或者使用 three.js 创建的 3D 对象。这些对象通常不需要是响应式的，而且 Vue 对它们进行响应式处理可能会导致问题。
• 大型不可变数据： 例如，一些配置数据，或者一些静态数据。这些数据在应用运行期间不会发生变化，因此不需要进行响应式追踪。
• 跳过对特定对象的响应式处理，以提升性能： 例如，在循环渲染大量组件时，可以使用 markRaw 来标记一些不需要响应式的组件选项，从而减少开销。

使用注意事项：

• markRaw 是一个单向操作。一旦一个对象被标记为原始对象，就无法再将其恢复为响应式对象。
• markRaw 只会阻止 Vue 对该对象及其属性进行响应式追踪。如果该对象内部包含其他响应式对象，这些响应式对象仍然会正常工作。
• 如果想将一个对象的所有属性都标记为原始对象，需要递归地遍历该对象的所有属性，并对它们都调用 markRaw。但是，这通常不是一个好的做法，因为它会使代码变得复杂，而且可能会导致一些意想不到的问题。
• markRaw通常与reactive或ref一起使用。如果直接使用markRaw创建的对象，那么该对象将完全不具备响应性。

对比 reactive 和 markRaw:

特性	reactive	markRaw
响应式	创建一个响应式对象	将对象标记为原始对象，不进行响应式追踪
触发更新	对象及其内部属性的变化都会触发更新	任何修改都不会触发更新
适用场景	需要对对象进行响应式追踪时	不需要对对象进行响应式追踪时
性能	性能开销较大	性能开销较小

组合使用 shallowRef 和 markRaw

shallowRef 和 markRaw 可以组合使用，以实现更精细的响应性控制。 例如，可以将一个包含大量第三方库对象的对象，使用 shallowRef 包裹起来，然后使用 markRaw 标记这些第三方库对象。 这样，只有当整个对象被替换时才会触发更新，而对第三方库对象的修改不会触发更新。

示例：

<template>
  <div>
    <p>Name: {{ data.name }}</p>
    <p>Value: {{ data.value }}</p>
    <button @click="updateData">Update Data</button>
  </div>
</template>

<script setup>
import { shallowRef, markRaw } from 'vue';

// 假设 someExternalLibraryObject 是一个来自第三方库的对象
const someExternalLibraryObject = {
  someProperty: 'initial value',
};

const data = shallowRef({
  name: 'Initial Name',
  value: markRaw(someExternalLibraryObject),
});

const updateData = () => {
  // 这会触发更新，因为 data.value 指向了一个新的对象
  data.value = {
    name: 'New Name',
    value: data.value.value, // 注意这里需要保持引用
  };

  // 这不会触发更新，因为 someExternalLibraryObject 被 markRaw 标记了
  someExternalLibraryObject.someProperty = 'updated value';
  console.log(someExternalLibraryObject.someProperty); // updated value
};
</script>

在这个例子中，data 是一个 shallowRef，它包含一个 name 属性和一个 value 属性。value 属性指向一个被 markRaw 标记的第三方库对象 someExternalLibraryObject。 当我们点击 "Update Data" 按钮时，data.value 会被替换为一个新的对象，这会触发更新，并显示新的 name 值。 但是，当我们修改 someExternalLibraryObject.someProperty 时，不会触发任何更新，因为 someExternalLibraryObject 被 markRaw 标记了。

性能测试与分析

为了更直观地了解 shallowRef 和 markRaw 的性能优势，我们可以进行一些简单的性能测试。 以下是一个使用 reactive、shallowRef 和 markRaw 创建大量对象的性能测试示例：

import { reactive, shallowRef, markRaw } from 'vue';

const objectCount = 10000;

console.time('reactive');
for (let i = 0; i < objectCount; i++) {
  reactive({
    id: i,
    name: `Object ${i}`,
    data: { a: 1, b: 2 },
  });
}
console.timeEnd('reactive');

console.time('shallowRef');
for (let i = 0; i < objectCount; i++) {
  shallowRef({
    id: i,
    name: `Object ${i}`,
    data: { a: 1, b: 2 },
  });
}
console.timeEnd('shallowRef');

console.time('markRaw');
for (let i = 0; i < objectCount; i++) {
  markRaw({
    id: i,
    name: `Object ${i}`,
    data: { a: 1, b: 2 },
  });
}
console.timeEnd('markRaw');

在不同的环境下运行这段代码，你会发现 reactive 的性能开销明显高于 shallowRef 和 markRaw。markRaw 的性能通常是最好的，因为它完全跳过了响应式追踪。

当然，这些只是简单的测试用例。在实际应用中，性能提升的幅度会受到多种因素的影响，例如数据结构的大小、组件的复杂度、以及更新的频率。 因此，在优化性能时，需要根据具体的场景进行分析和测试。

实际案例分析：优化大型列表渲染

假设我们有一个需要渲染大量数据的列表。每个数据项都包含一些不需要响应式的属性，例如图片 URL、描述文本等。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <img :src="item.imageUrl" alt="Image">
      <p>{{ item.description }}</p>
      <button @click="onClick(item.id)">Click</button>
    </li>
  </ul>
</template>

<script setup>
import { reactive } from 'vue';

const items = reactive(generateItems(1000));

function generateItems(count) {
  const result = [];
  for (let i = 0; i < count; i++) {
    result.push({
      id: i,
      imageUrl: `https://example.com/image/${i}.jpg`,
      description: `This is item ${i}`,
      onClick: () => {
        alert(`Clicked item ${i}`);
      },
    });
  }
  return result;
}

function onClick(id) {
  // 处理点击事件
  alert(`Clicked item ${id}`);
}
</script>

在这个例子中，items 是一个包含 1000 个数据项的响应式数组。每个数据项都包含一个 imageUrl 属性和一个 description 属性，这些属性是不需要响应式的。 如果我们使用 reactive 来包装 items，Vue 会对每个数据项的所有属性进行响应式追踪，这会增加不必要的开销。

为了优化性能，我们可以使用 markRaw 来标记这些不需要响应式的属性：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <img :src="item.imageUrl" alt="Image">
      <p>{{ item.description }}</p>
      <button @click="onClick(item.id)">Click</button>
    </li>
  </ul>
</template>

<script setup>
import { reactive, markRaw } from 'vue';

const items = reactive(generateItems(1000));

function generateItems(count) {
  const result = [];
  for (let i = 0; i < count; i++) {
    result.push({
      id: i,
      imageUrl: markRaw(`https://example.com/image/${i}.jpg`),
      description: markRaw(`This is item ${i}`),
      onClick: () => {
        alert(`Clicked item ${i}`);
      },
    });
  }
  return result;
}

function onClick(id) {
  // 处理点击事件
  alert(`Clicked item ${id}`);
}
</script>

通过使用 markRaw 标记 imageUrl 和 description 属性，我们可以减少 Vue 的响应式追踪开销，从而提升列表渲染的性能。

选择合适的 API

选择 shallowRef 还是 markRaw 取决于具体的场景和需求。

• 如果只需要在整个对象被替换时才触发更新，可以使用 shallowRef。
• 如果完全不需要对对象进行响应式追踪，可以使用 markRaw。
• 如果需要对对象的部分属性进行响应式追踪，可以使用 reactive 或 ref，并结合 markRaw 来标记不需要响应式的属性。

场景	推荐使用的 API	理由
需要深层响应式追踪	reactive 或 ref	这是默认的响应式行为，适用于需要对对象及其内部属性的变化进行追踪的场景。
只需要浅层响应式追踪	shallowRef	适用于只需要在整个对象被替换时才触发更新的场景，例如大型数据对象。
完全不需要响应式追踪	markRaw	适用于不需要对对象进行任何响应式追踪的场景，例如第三方库对象、大型不可变数据等。
部分属性需要响应式追踪，部分不需要	reactive 或 ref + markRaw	适用于需要对对象的部分属性进行响应式追踪，而对其他属性不需要进行响应式追踪的场景。可以使用 reactive 或 ref 创建响应式对象，然后使用 markRaw 标记不需要响应式的属性。
对象需要在响应式和非响应式之间切换	复杂的组合	这种情况比较少见，可能需要使用一些技巧来实现。例如，可以使用一个 ref 来控制是否对对象进行响应式追踪，并根据 ref 的值来动态地创建响应式对象或原始对象。但是，这种做法会使代码变得复杂，需要谨慎使用。通常来说，最好避免这种情况，尽量设计更简洁的数据结构和响应式模型。

结论

shallowRef 和 markRaw 是 Vue 3 中强大的响应性 API，可以帮助我们更精细地控制 Vue 的响应式行为，从而避免不必要的开销，提升应用的整体性能。 理解它们的原理和适用场景，并根据具体的需求选择合适的 API，是优化 Vue 应用性能的关键。

减少依赖追踪开销，优化应用性能

shallowRef 提供了浅层响应性，只追踪 .value 的变化，而 markRaw 则完全跳过响应式追踪。合理利用这两个 API 可以显著减少不必要的依赖追踪，尤其是在处理大型数据结构或与第三方库集成时，能有效提升 Vue 应用的性能。

更多IT精英技术系列讲座，到智猿学院