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

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

大家好！今天我们来深入探讨 Vue 3 中两种非常重要的性能优化手段：shallowRef 和 markRaw。理解并合理运用它们，可以显著减少 Vue 响应式系统的依赖追踪开销，从而提升应用的整体性能。

什么是响应性？

在深入shallowRef和markRaw之前，我们需要回顾 Vue 响应式系统的核心概念。Vue 的响应式系统允许我们在数据发生变化时，自动更新视图。当我们在模板中使用一个响应式数据，Vue 会建立一个依赖关系，将该数据与组件的渲染函数（或计算属性等）关联起来。当数据发生改变时，Vue 会通知所有依赖于该数据的组件进行更新。

这种机制非常强大，但同时也带来一定的开销。每一次数据访问，Vue 都需要进行依赖追踪，记录哪些组件依赖于该数据。对于大型应用来说，这种开销可能会变得非常显著。

shallowRef: 浅层响应性

shallowRef 是 Vue 3 提供的一个函数，用于创建一个浅层响应式的 ref。与普通的 ref 不同，shallowRef 只会对 ref 的 .value 进行响应式追踪，而不会递归地追踪 .value 内部的属性。

这意味着，如果 shallowRef 包裹的是一个对象，那么只有当整个对象被替换时，才会触发更新。对象内部属性的修改不会触发更新。

语法:

import { shallowRef } from 'vue';

const myObject = shallowRef({
  name: 'John',
  age: 30
});

console.log(myObject.value.name); // John

myObject.value.name = 'Jane'; // 不会触发更新

myObject.value = { name: 'Jane', age: 32 }; // 会触发更新

适用场景:

• 大型不可变数据结构: 当处理大型数据结构，并且不需要对内部属性的变化进行追踪时，shallowRef 可以显著减少依赖追踪的开销。例如，一个包含大量配置项的对象，这些配置项在初始化后很少改变。
• 外部库管理的数据: 当使用第三方库管理数据，而 Vue 只需要知道数据整体是否改变时，shallowRef 非常有用。例如，使用 Immutable.js 管理状态。
• 性能敏感的组件: 在性能敏感的组件中，如果只有对整个对象的替换感兴趣，可以使用 shallowRef 来避免不必要的更新。

代码示例:

假设我们有一个组件，需要显示一个大型配置对象：

<template>
  <div>
    <p>Name: {{ config.name }}</p>
    <p>Version: {{ config.version }}</p>
  </div>
</template>

<script>
import { ref, shallowRef, onMounted } from 'vue';

export default {
  setup() {
    // 使用 ref
    const configRef = ref({
      name: 'My App',
      version: '1.0.0',
      settings: {
        theme: 'light',
        language: 'en'
      }
    });

    // 使用 shallowRef
    const shallowConfigRef = shallowRef({
      name: 'My App',
      version: '1.0.0',
      settings: {
        theme: 'light',
        language: 'en'
      }
    });

    onMounted(() => {
      // 假设我们从 API 获取配置
      setTimeout(() => {
        // 使用 ref 的情况
        // configRef.value.name = 'New App Name'; // 会触发更新

        // 使用 shallowRef 的情况
        // shallowConfigRef.value.name = 'New App Name'; // 不会触发更新

        // 使用 shallowRef 的情况，需要替换整个对象
        shallowConfigRef.value = {
          name: 'New App Name',
          version: '1.1.0',
          settings: {
            theme: 'dark',
            language: 'fr'
          }
        }; // 会触发更新
      }, 1000);
    });

    return {
      config: configRef.value,
      shallowConfig: shallowConfigRef.value
    };
  }
};
</script>

在这个例子中，如果我们使用 ref，修改 configRef.value.name 会触发组件的更新。但如果我们使用 shallowRef，修改 shallowConfigRef.value.name 不会触发更新，除非我们替换整个 shallowConfigRef.value 对象。

注意事项:

• shallowRef 只影响第一层属性。如果第一层属性是一个对象，那么该对象的内部属性仍然是响应式的。
• 在使用 shallowRef 时，需要清楚地了解数据的变化模式，确保只有在整个对象被替换时才需要更新。
• shallowRef 不支持 reactive， shallowReactive。

markRaw: 标记为原始数据

markRaw 是另一个 Vue 3 提供的函数，用于将一个对象标记为原始数据，使其永远不会被转换为响应式对象。这意味着，无论我们如何修改这个对象，Vue 都不会追踪它的变化。

语法:

import { markRaw } from 'vue';

const myObject = {
  name: 'John',
  age: 30
};

markRaw(myObject);

// 将 myObject 放入响应式对象中
import { ref } from 'vue';
const myRef = ref(myObject);

myRef.value.name = 'Jane'; // 不会触发更新

适用场景:

• 第三方库返回的对象: 当使用第三方库返回的对象，并且这些对象不需要被 Vue 追踪时，可以使用 markRaw。例如，一些图形库返回的对象，它们本身有自己的更新机制。
• 大型静态数据: 对于大型静态数据，例如从服务器加载的配置数据，可以使用 markRaw 来避免不必要的响应式转换。
• 避免意外的响应式转换: 有时候，我们可能不希望某些对象被意外地转换为响应式对象。例如，在编写一些工具函数时，可以使用 markRaw 来确保传入的对象不会被修改。
• 优化性能: markRaw 可以避免 Vue 对对象进行深度递归的响应式转换，从而提高性能。

代码示例:

假设我们有一个组件，需要显示一个第三方库返回的对象：

<template>
  <div>
    <p>X: {{ data.x }}</p>
    <p>Y: {{ data.y }}</p>
  </div>
</template>

<script>
import { ref, onMounted, markRaw } from 'vue';

// 假设这是一个第三方库
function createPoint(x, y) {
  return { x, y, update(newX, newY) { this.x = newX; this.y = newY; } };
}

export default {
  setup() {
    const point = ref(markRaw(createPoint(10, 20)));

    onMounted(() => {
      // 使用第三方库的更新方法
      setTimeout(() => {
        point.value.update(30, 40); // 不会触发 Vue 的更新
      }, 1000);
    });

    return {
      data: point.value
    };
  }
};
</script>

在这个例子中，我们使用 markRaw 将 createPoint 函数返回的对象标记为原始数据。即使我们通过 point.value.update 修改了对象，Vue 也不会追踪它的变化，因此不会触发组件的更新。如果我们需要更新组件，需要手动触发更新，例如使用 forceUpdate。

注意事项:

• markRaw 是不可逆的。一旦对象被标记为原始数据，就无法再将其转换为响应式对象。
• markRaw 只影响当前对象。如果对象内部包含其他对象，那么这些对象仍然可能被转换为响应式对象，除非它们也被 markRaw 标记。
• 谨慎使用 markRaw。确保你真正了解数据的变化模式，并且不需要 Vue 追踪这些变化。
• markRaw 可以和shallowRef一起使用, 但是顺序必须是先markRaw再shallowRef。

shallowRef vs markRaw: 区别与选择

shallowRef 和 markRaw 都是用于优化 Vue 应用性能的工具，但它们的应用场景和工作方式有所不同。

特性	shallowRef	markRaw
响应性	浅层响应式，只追踪 .value 的变化	完全非响应式，不追踪任何变化
适用场景	大型不可变数据结构，外部库管理的数据	第三方库返回的对象，大型静态数据，避免意外的响应式转换
更新方式	替换整个 .value 对象触发更新	手动更新
适用范围	ref对象	任意对象

如何选择？

• 如果只需要知道对象整体是否被替换，而不需要追踪内部属性的变化，可以使用 shallowRef。
• 如果完全不需要 Vue 追踪对象的变化，可以使用 markRaw。
• 如果需要手动控制更新，可以使用 markRaw。
• 如果对象内部包含其他对象，并且这些对象需要被 Vue 追踪，那么不应该使用 markRaw。

最佳实践

• 谨慎使用: 在使用 shallowRef 和 markRaw 之前，仔细评估是否真的需要它们。滥用它们可能会导致意外的行为和难以调试的问题。
• 文档化: 在代码中清晰地注释为什么使用 shallowRef 或 markRaw，以及它们的适用场景。
• 测试: 编写测试用例来验证 shallowRef 和 markRaw 的行为是否符合预期。

总结：shallowRef和markRaw，性能优化的利器

shallowRef 和 markRaw 是 Vue 3 中强大的性能优化工具。它们允许开发者更精细地控制响应式系统的行为，减少不必要的依赖追踪开销，从而提升应用的整体性能。通过理解它们的区别和适用场景，我们可以更好地利用它们来构建高性能的 Vue 应用。

使用场景再提炼

shallowRef 适用于只需要知道对象整体是否改变的场景，而 markRaw 适用于完全不需要 Vue 追踪对象变化的场景。合理使用它们可以避免不必要的依赖追踪，提升性能。

避免过度优化，确保可维护性

在追求性能优化的同时，也要注意代码的可读性和可维护性。过度优化可能会导致代码难以理解和调试。在选择使用 shallowRef 和 markRaw 之前，仔细评估收益和成本。

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