Vue `markRaw`在性能优化中的应用：绕过Proxy代理与依赖追踪的底层原理

Vue markRaw 在性能优化中的应用：绕过 Proxy 代理与依赖追踪的底层原理

大家好，今天我们来深入探讨 Vue.js 中 markRaw 这个 API，以及它在性能优化中的作用。markRaw 允许我们跳过对某个对象及其属性的 Proxy 代理，从而避免不必要的依赖追踪。这在某些特定场景下可以显著提升性能。

1. Vue 的响应式系统：Proxy 与依赖追踪

理解 markRaw 的作用，首先要理解 Vue 的响应式系统。Vue 3 使用 Proxy 来实现数据的响应式。当我们访问一个响应式对象的属性时，Vue 会追踪这个依赖关系。当该属性被修改时，Vue 会通知所有依赖于该属性的组件进行更新。

核心机制：

• Proxy 代理： Vue 通过 Proxy 代理原始数据，拦截属性的读取 (get) 和设置 (set) 操作。
• 依赖收集 (Track)： 在 get 操作中，Vue 会收集当前活跃的 effect (通常是组件的渲染函数) 作为该属性的依赖。
• 触发更新 (Trigger)： 在 set 操作中，Vue 会通知所有依赖于该属性的 effect 重新执行。

代码示例：

import { reactive, effect } from 'vue';

const data = reactive({
  name: 'Vue',
  age: 3
});

effect(() => {
  console.log(`Name: ${data.name}, Age: ${data.age}`);
});

data.name = 'React'; // 输出: Name: React, Age: 3
data.age = 5;      // 输出: Name: React, Age: 5

在这个例子中，reactive(data) 创建了一个响应式对象。effect 函数创建了一个副作用，它会追踪 data.name 和 data.age 的依赖。当 data.name 或 data.age 被修改时，effect 函数会被重新执行。

性能问题：

虽然 Proxy 提供了强大的响应式能力，但它也带来了一些性能开销。每次访问或修改响应式对象的属性，都需要经过 Proxy 的拦截和依赖追踪。对于大型对象或频繁访问的属性，这些开销可能会变得显著。

2. markRaw 的作用：绕过 Proxy

markRaw 的作用就是告诉 Vue，某个对象不应该被转换为响应式对象。这意味着 Vue 不会为该对象创建 Proxy 代理，也不会追踪其属性的依赖关系。

使用方式：

import { reactive, markRaw } from 'vue';

const nonReactiveObject = {
  id: 1,
  data: new Array(10000).fill(0) // 大型数组
};

markRaw(nonReactiveObject);

const reactiveData = reactive({
  message: 'Hello',
  nonReactive: nonReactiveObject
});

reactiveData.message = 'World'; // 触发更新
reactiveData.nonReactive.id = 2; // 不会触发更新

在这个例子中，nonReactiveObject 被 markRaw 标记为非响应式对象。即使它被包含在响应式对象 reactiveData 中，对其属性的修改也不会触发 Vue 的更新机制。reactiveData.message的更新仍然生效。

使用场景：

• 大型不可变数据： 对于包含大量数据的对象，如果这些数据不需要响应式更新，可以使用 markRaw 来避免不必要的 Proxy 开销。例如，来自外部库的配置对象，或者不需要响应式更新的静态数据。
• 第三方库的对象： 有些第三方库会创建自己的对象，这些对象可能不兼容 Vue 的响应式系统。使用 markRaw 可以防止 Vue 尝试代理这些对象。
• 性能敏感的组件： 在性能敏感的组件中，可以使用 markRaw 来优化渲染过程。如果组件中包含大量不需要响应式更新的数据，可以使用 markRaw 来减少 Proxy 的开销。

3. markRaw 的底层原理

markRaw 的底层原理很简单：它只是在对象上添加一个特殊的标记，告诉 Vue 不要为该对象创建 Proxy。

import { Raw } from './reactive'; // Vue内部使用的Raw symbol

export function markRaw<T extends object>(value: T): T {
  def(value, Raw, true); // def 是一个定义不可枚举属性的函数
  return value
}

function def(obj: object, key: string | symbol, value: any) {
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: false,
    value
  })
}

当 Vue 尝试将一个对象转换为响应式对象时，它会检查该对象是否具有 Raw 标记。如果存在，Vue 会跳过 Proxy 创建过程。

4. markRaw 的使用注意事项

• 不可逆操作： markRaw 是一个不可逆的操作。一旦一个对象被标记为非响应式，就无法再将其转换为响应式对象。
• 嵌套对象： markRaw 只会影响直接标记的对象。如果该对象包含其他嵌套对象，这些嵌套对象仍然会被转换为响应式对象，除非它们也被 markRaw 标记。
• 谨慎使用： 滥用 markRaw 可能会导致组件无法正确更新。只有在确定某个对象不需要响应式更新时，才应该使用 markRaw。

5. 性能测试与案例分析

为了更直观地了解 markRaw 的性能提升，我们进行一些简单的性能测试。

测试场景：

创建一个包含大量数据的列表，分别使用响应式对象和非响应式对象渲染该列表。

代码示例：

<template>
  <div>
    <h1>响应式对象</h1>
    <ul>
      <li v-for="item in reactiveList" :key="item.id">{{ item.name }}</li>
    </ul>
    <h1>非响应式对象</h1>
    <ul>
      <li v-for="item in nonReactiveList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    const listSize = 10000;
    const reactiveList = reactive([]);
    const nonReactiveList = ref([]);

    onMounted(() => {
      console.time('reactive');
      for (let i = 0; i < listSize; i++) {
        reactiveList.push({ id: i, name: `Item ${i}` });
      }
      console.timeEnd('reactive');

      console.time('nonReactive');
      const tempArray = []; // 使用临时数组，避免响应式
      for (let i = 0; i < listSize; i++) {
        tempArray.push({ id: i, name: `Item ${i}` });
      }
      nonReactiveList.value = tempArray;
      markRaw(nonReactiveList.value);
      console.timeEnd('nonReactive');
    });

    return {
      reactiveList,
      nonReactiveList
    };
  }
};
</script>

测试结果（示例）：

操作	响应式对象 (reactive)	非响应式对象 (markRaw)
创建列表	50ms	5ms
首次渲染列表	100ms	70ms

分析：

从测试结果可以看出，使用 markRaw 可以显著减少创建和渲染大型列表的时间。这是因为 markRaw 避免了 Proxy 代理和依赖追踪的开销。

实际案例：

• 图表组件： 在图表组件中，通常会使用大量的坐标数据。这些数据通常不需要响应式更新。可以使用 markRaw 来优化图表组件的性能。
• 虚拟滚动列表： 在虚拟滚动列表中，只有可见区域的数据需要响应式更新。可以使用 markRaw 来标记非可见区域的数据，从而减少 Proxy 的开销。
• 游戏开发： 在游戏开发中，大量的游戏对象可能不需要响应式更新。可以使用 markRaw 来优化游戏性能。

6. 与 shallowReactive 和 shallowRef 的比较

Vue 还提供了 shallowReactive 和 shallowRef 这两个 API，它们也用于减少响应式开销。但它们与 markRaw 的作用有所不同。

• shallowReactive： 只对对象的顶层属性进行响应式代理，而不会递归代理嵌套对象。
• shallowRef： 只追踪 value 属性的依赖，而不会追踪 value 内部属性的依赖。

区别：

API	作用	适用场景
markRaw	标记对象为非响应式，完全跳过 Proxy 代理和依赖追踪。	对象不需要响应式更新，或者包含大量数据，避免 Proxy 开销。
shallowReactive	只对对象的顶层属性进行响应式代理，不会递归代理嵌套对象。	对象只需要顶层属性的响应式更新，嵌套对象不需要响应式更新。
shallowRef	只追踪 value 属性的依赖，不会追踪 value 内部属性的依赖。	只需要追踪 ref 的 value 属性的依赖，而不需要追踪 value 内部属性的依赖。例如，当 value 是一个大型对象，但只需要监听 value 的整体变化时。

选择：

选择哪个 API 取决于具体的应用场景。如果对象完全不需要响应式更新，应该使用 markRaw。如果只需要部分属性的响应式更新，可以考虑使用 shallowReactive 或 shallowRef。

7. 代码之外：最佳实践

除了理解 markRaw 的技术原理，在实际项目中如何正确使用它也很重要。

• 分析性能瓶颈： 在使用 markRaw 之前，应该先分析项目的性能瓶颈。确定哪些对象是不必要的响应式对象，才应该使用 markRaw。
• 添加注释： 在代码中添加注释，说明为什么使用 markRaw。这可以帮助其他开发者理解代码的意图，并避免滥用 markRaw。
• 谨慎使用： 滥用 markRaw 可能会导致组件无法正确更新。只有在确定某个对象不需要响应式更新时，才应该使用 markRaw。
• 测试： 使用 markRaw 之后，应该进行充分的测试，确保组件的功能正常。

8. 总结与展望

markRaw 是 Vue 中一个强大的性能优化工具，它可以帮助我们避免不必要的 Proxy 代理和依赖追踪。通过合理地使用 markRaw，我们可以显著提升 Vue 应用的性能。希望今天的讲解能够帮助大家更好地理解和使用 markRaw。

9. markRaw 的本质：标记非响应式对象

markRaw 的核心在于通过标记对象，告知 Vue 跳过响应式转换，从而减少 Proxy 代理和依赖追踪的开销。

10. 适用场景：静态数据与第三方库

markRaw 适用于不需要响应式更新的静态数据，以及可能与 Vue 响应式系统不兼容的第三方库对象。

11. 合理利用：提升性能需谨慎

谨慎使用 markRaw，在确定对象不需要响应式更新时才使用，并在使用前分析性能瓶颈，添加注释，并进行充分的测试。

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