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

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

大家好，今天我们来深入探讨 Vue 中 markRaw 的使用及其底层原理，以及它在性能优化方面的作用。markRaw 是 Vue 3 提供的一个 API，允许我们标记一个对象，使其跳过响应式系统的转换。这意味着该对象不会被 Proxy 代理，也不会被 Vue 的依赖追踪系统所追踪。理解 markRaw 的作用，有助于我们在特定场景下避免不必要的性能开销，从而优化 Vue 应用的性能。

响应式系统的基础：Proxy 与依赖追踪

要理解 markRaw 的作用，首先我们需要了解 Vue 3 响应式系统的基本原理。Vue 3 使用 Proxy 对象来实现响应式，并在内部维护一个依赖追踪系统。

1. Proxy 代理：

当我们将一个普通 JavaScript 对象传递给 reactive 函数时，Vue 会使用 Proxy 来创建一个该对象的代理。Proxy 允许我们拦截对对象属性的读取（get）和设置（set）操作。

2. 依赖追踪：

当在组件的 template 或 computed 属性中访问响应式对象的属性时，Vue 会记录下这个组件或 computed 属性对该属性的依赖关系。这个过程就是依赖追踪。

3. 触发更新：

当响应式对象的属性发生改变时，Vue 会通知所有依赖于该属性的组件或 computed 属性，触发它们的更新。

以下代码展示了 reactive 创建响应式对象，并进行依赖追踪和更新的过程：

import { reactive, effect } from 'vue';

// 创建一个响应式对象
const state = reactive({
  count: 0,
});

// 创建一个 effect，当 count 改变时，会执行这个函数
effect(() => {
  console.log('Count is:', state.count);
});

// 修改 count 的值，触发 effect 重新执行
state.count++; // 控制台输出: Count is: 1
state.count++; // 控制台输出: Count is: 2

在这个例子中，state 是一个响应式对象，当 state.count 的值发生改变时，effect 函数会被重新执行。这是因为 effect 函数在执行时访问了 state.count 属性，Vue 将 effect 函数注册为 state.count 的依赖。

响应式系统的优点：

• 声明式更新： 开发者只需要关注数据的变化，而无需手动操作 DOM，Vue 会自动更新视图。
• 高效的更新： Vue 只会更新需要更新的部分，避免了不必要的 DOM 操作。

响应式系统的缺点：

• 性能开销： Proxy 代理和依赖追踪都会带来一定的性能开销。对于不需要响应式的对象，这些开销是不必要的。
• 内存占用： 依赖关系需要占用一定的内存空间。

markRaw 的作用：跳过响应式转换

markRaw 的作用就是标记一个对象，使其跳过响应式系统的转换。被 markRaw 标记的对象不会被 Proxy 代理，也不会被 Vue 的依赖追踪系统所追踪。

以下代码展示了 markRaw 的用法：

import { markRaw, reactive } from 'vue';

// 创建一个普通对象
const rawObject = {
  name: 'John',
  age: 30,
};

// 使用 markRaw 标记 rawObject
const nonReactiveObject = markRaw(rawObject);

// 创建一个响应式对象，包含 nonReactiveObject
const state = reactive({
  data: nonReactiveObject,
});

// 修改 nonReactiveObject 的属性
nonReactiveObject.age = 31;

// 修改 state.data.age 不会触发更新
// 组件不会因为 nonReactiveObject.age 的改变而重新渲染

在这个例子中，rawObject 被 markRaw 标记，因此 state.data.age 的改变不会触发更新。即使 state 是一个响应式对象，其内部引用的 nonReactiveObject 仍然是非响应式的。

markRaw 的应用场景：性能优化

markRaw 主要用于以下场景：

• 大型不可变数据结构： 对于大型的、不需要响应式更新的数据结构，例如第三方库返回的数据或全局配置对象，可以使用 markRaw 来避免不必要的性能开销。
• Vue 组件实例： Vue 组件实例本身已经有自己的响应式系统，不需要再次被 Proxy 代理。Vue 内部会使用 markRaw 来标记组件实例。
• 性能敏感的场景： 在性能敏感的场景下，例如频繁更新的数据，可以使用 markRaw 来避免不必要的依赖追踪和更新。

示例 1：大型不可变数据结构

假设我们有一个大型的配置对象，从服务器获取，并且在应用的生命周期内不会发生改变。

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

export default {
  setup() {
    const config = reactive({
      data: null,
    });

    onMounted(async () => {
      const response = await fetch('/api/config');
      const rawConfig = await response.json();

      // 使用 markRaw 标记配置对象
      config.data = markRaw(rawConfig);
    });

    return {
      config,
    };
  },
  template: `
    <div>
      {{ config.data?.appName }}
    </div>
  `,
};

在这个例子中，rawConfig 从服务器获取后，使用 markRaw 标记，避免了不必要的响应式转换。

示例 2：第三方库返回的数据

假设我们使用一个第三方库来处理数据，并且该库返回的数据不需要响应式更新。

import { markRaw, reactive } from 'vue';
import someThirdPartyLibrary from 'some-third-party-library';

export default {
  setup() {
    const data = reactive({
      processedData: null,
    });

    const rawData = { /* ... */ };
    const processedData = someThirdPartyLibrary.processData(rawData);

    // 使用 markRaw 标记处理后的数据
    data.processedData = markRaw(processedData);

    return {
      data,
    };
  },
  template: `
    <div>
      {{ data.processedData?.result }}
    </div>
  `,
};

在这个例子中，processedData 是第三方库返回的数据，使用 markRaw 标记，避免了不必要的响应式转换。

markRaw 的注意事项

• 不要滥用 markRaw： 只有在确定对象不需要响应式更新时，才应该使用 markRaw。滥用 markRaw 可能会导致组件无法正确更新。
• markRaw 是浅层的： markRaw 只会标记对象本身，而不会递归标记对象的属性。如果对象的属性也是对象，并且需要非响应式，需要对这些属性也使用 markRaw。
• markRaw 不可逆： 一旦对象被 markRaw 标记，就无法再将其转换为响应式对象。
• 与 shallowReactive 的区别： shallowReactive 创建一个浅层响应式对象，只有对象的顶层属性是响应式的，而对象的属性如果是对象，则不是响应式的。markRaw 则完全跳过响应式转换。

底层原理：__v_skip 属性

markRaw 的底层实现非常简单，它会在对象上添加一个 __v_skip 属性，并将其设置为 true。当 Vue 的响应式系统检测到对象具有 __v_skip 属性时，就会跳过对该对象的响应式转换。

以下代码展示了 markRaw 的简化实现：

function markRaw(value) {
  Object.defineProperty(value, '__v_skip', {
    configurable: true,
    enumerable: false,
    value: true,
    writable: false,
  });
  return value;
}

当 reactive 或 readonly 处理对象时，会检查__v_skip属性：

function reactive(target){
  if(target && target.__v_skip){
    return target;
  }
  // ... reactive 的逻辑
}

性能测试与对比

为了更直观地了解 markRaw 的性能优势，我们可以进行一些简单的性能测试。以下代码展示了一个简单的性能测试示例：

import { reactive, markRaw } from 'vue';

const ITERATIONS = 100000;

function testReactive() {
  console.time('Reactive');
  const data = reactive({ value: 0 });
  for (let i = 0; i < ITERATIONS; i++) {
    data.value++;
  }
  console.timeEnd('Reactive');
}

function testMarkRaw() {
  console.time('MarkRaw');
  const rawData = { value: 0 };
  const data = reactive({ value: markRaw(rawData) });
  for (let i = 0; i < ITERATIONS; i++) {
    data.value.value++;
  }
  console.timeEnd('MarkRaw');
}

testReactive();
testMarkRaw();

// 测试直接修改非响应式对象
function testRaw() {
  console.time('Raw');
  const rawData = { value: 0 };
  for (let i = 0; i < ITERATIONS; i++) {
    rawData.value++;
  }
  console.timeEnd('Raw');
}

testRaw();

在不同情况下，性能表现可能有所不同，但通常情况下，使用 markRaw 可以显著提高性能，特别是在大量数据操作的场景下。

测试结果示例：

测试用例	执行时间 (ms)
Reactive	150
MarkRaw	50
Raw	20

注意： 这只是一个简单的示例，实际的性能提升取决于具体的应用场景。在实际应用中，需要根据具体情况进行性能测试和优化。

markRaw 与其他性能优化策略的结合

markRaw 可以与其他性能优化策略结合使用，以达到更好的效果。

• v-memo： v-memo 可以缓存组件的 VNode，避免不必要的重新渲染。当组件的 props 没有发生改变时，v-memo 可以直接使用缓存的 VNode，而无需重新创建。
• shouldComponentUpdate： shouldComponentUpdate 允许我们自定义组件的更新逻辑。只有当组件的 props 或 state 发生改变时，才需要重新渲染。
• 计算属性的缓存： 计算属性会自动缓存计算结果。只有当计算属性的依赖发生改变时，才会重新计算。

总结：恰当使用带来的提升

markRaw 是 Vue 3 中一个非常有用的 API，它允许我们标记一个对象，使其跳过响应式系统的转换。通过合理使用 markRaw，可以避免不必要的性能开销，从而优化 Vue 应用的性能。但是，需要注意的是，不要滥用 markRaw，只有在确定对象不需要响应式更新时，才应该使用 markRaw。

性能优化策略的选择

选择哪种性能优化策略，应当根据具体的应用场景和需求进行权衡。markRaw 适用于大型不可变数据结构和性能敏感的场景，而 v-memo 和 shouldComponentUpdate 适用于组件级别的优化。

始终关注性能瓶颈

性能优化是一个持续的过程。我们需要始终关注应用的性能瓶颈，并根据具体情况选择合适的优化策略。使用 Vue 的性能分析工具可以帮助我们找到性能瓶颈，并进行针对性的优化。

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