Vue `markRaw`在性能优化中的应用：绕过Proxy代理与依赖追踪的底层原理 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

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

大家好，今天我们来深入探讨 Vue 3 中 markRaw API 的应用，以及它在性能优化方面发挥的关键作用。我们会从 Vue 3 的响应式系统入手，逐步分析 markRaw 如何绕过 Proxy 代理和依赖追踪，并结合实际案例，展示其在特定场景下的优化效果。

Vue 3 响应式系统的基石：Proxy 与依赖追踪

在深入 markRaw 之前，我们需要对 Vue 3 的响应式系统有一个清晰的认识。 Vue 3 使用 Proxy 对象取代了 Vue 2 中的 Object.defineProperty，作为实现响应式数据的核心机制。

Proxy 的作用:

Proxy 允许我们拦截对象上的各种操作，例如属性的读取、设置、删除等。 Vue 3 利用这一特性，在数据对象被读取或修改时，能够触发相应的依赖收集和更新机制。

依赖追踪的原理:

当一个组件渲染时，它会访问响应式数据。在读取响应式数据的过程中，Vue 会追踪到当前激活的 effect (例如，组件的渲染函数)。这个 effect 被添加到该响应式数据的依赖列表中。当响应式数据发生变化时，Vue 会通知所有依赖于它的 effect，触发组件重新渲染。

让我们通过一个简单的例子来理解 Proxy 和依赖追踪：

import { reactive, effect } from 'vue';

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

effect(() => {
  console.log(`Count is: ${state.count}`); // 首次执行，输出 "Count is: 0"
});

state.count++; // 修改 state.count，触发 effect 重新执行，输出 "Count is: 1"

在这个例子中：

reactive(state) 创建了一个响应式的 state 对象，它内部使用 Proxy 拦截了 state 对象的属性访问。
effect() 创建了一个副作用函数，它会在依赖的响应式数据发生变化时重新执行。
在 effect 函数内部，我们访问了 state.count。这触发了依赖收集，将当前的 effect 函数添加到 state.count 的依赖列表中。
当我们修改 state.count 时，Proxy 拦截了这次修改，并通知所有依赖于 state.count 的 effect。
effect 函数重新执行，控制台输出新的 state.count 值。

响应式系统的开销:

虽然 Proxy 和依赖追踪带来了强大的响应式能力，但也引入了一定的性能开销。每次访问响应式数据时，都需要经过 Proxy 的拦截和依赖追踪过程。对于大型应用或频繁更新的数据，这些开销可能会变得显著。

`markRaw` 的作用：绕过响应式系统

markRaw 是 Vue 3 提供的一个 API，它的作用是将一个对象标记为“原始”对象。被 markRaw 标记的对象，将不会被 Vue 的响应式系统追踪，这意味着：

不会被转换为 Proxy 对象。
不会进行依赖收集。
修改该对象上的属性不会触发组件重新渲染。

markRaw 的语法:

import { markRaw } from 'vue';

const nonReactiveObject = markRaw({
  id: 1,
  name: 'Non-Reactive Object',
});

markRaw 的底层原理:

markRaw 的实现非常简单。它只是在对象上添加一个特殊的标记，告诉 Vue 响应式系统忽略该对象。具体来说，Vue 内部会检查对象是否具有这个标记，如果存在，则直接跳过 Proxy 的创建和依赖追踪过程。

// Vue 3 源码 (简化版)

// 检查对象是否是原始对象
function isRaw(value: any): boolean {
  return value && value.__v_skip === true;
}

// 将对象标记为原始对象
export function markRaw<T extends object>(value: T): T {
  def(value, '__v_skip', true); // def 函数用于定义不可枚举的属性
  return value;
}

从代码可以看出，markRaw 只是简单地给对象添加了一个不可枚举的属性 __v_skip，并将其设置为 true。 Vue 在创建响应式对象时，会检查该属性是否存在，如果存在则跳过响应式处理。

`markRaw` 的应用场景与性能优化

markRaw 主要用于以下几种场景：

存储大型、不可变的数据: 例如，一些第三方库返回的数据，或者一些静态配置数据，这些数据通常不需要响应式更新，使用 markRaw 可以避免不必要的性能开销。
优化性能瓶颈: 在某些情况下，响应式更新可能会导致性能问题。使用 markRaw 可以将部分数据排除在响应式系统之外，从而提高性能。
与非响应式系统集成: 如果你需要在 Vue 应用中使用一些非响应式的库或组件，可以使用 markRaw 来避免冲突。

案例分析 1: 存储第三方库返回的数据

假设我们使用一个第三方图表库，该库返回一个包含大量数据的对象。这些数据通常是静态的，不需要响应式更新。

import { reactive, markRaw, onMounted, ref } from 'vue';
import Chart from 'chart.js/auto'; // 假设我们使用 chart.js

export default {
  setup() {
    const chartData = ref(null);

    onMounted(() => {
      // 模拟第三方库返回的数据
      const data = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'Sales',
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1,
          },
        ],
      };

      // 使用 markRaw 标记数据
      chartData.value = markRaw(data);

      // 创建图表
      const ctx = document.getElementById('myChart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: chartData.value,
        options: {
          scales: {
            y: {
              beginAtZero: true,
            },
          },
        },
      });
    });

    return { chartData };
  },
  template: '<canvas id="myChart"></canvas>',
};

在这个例子中，我们将第三方库返回的数据 data 使用 markRaw 标记为原始对象。这样可以避免 Vue 将其转换为 Proxy 对象，从而减少性能开销。即使 data 对象包含大量数据，也不会影响 Vue 应用的性能。

案例分析 2: 优化性能瓶颈

假设我们有一个大型列表，每个列表项都包含一个复杂的数据对象。如果我们对列表项进行排序或过滤，可能会导致频繁的组件重新渲染，从而影响性能。

<template>
  <ul>
    <li v-for="item in sortedItems" :key="item.id">
      {{ item.name }} - {{ item.details.description }}
    </li>
  </ul>
</template>

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

export default {
  setup() {
    const items = reactive([
      // 模拟大量数据
      { id: 1, name: 'Item 1', details: { description: 'Description 1', otherData: { a: 1, b: 2 } } },
      { id: 2, name: 'Item 2', details: { description: 'Description 2', otherData: { a: 3, b: 4 } } },
      { id: 3, name: 'Item 3', details: { description: 'Description 3', otherData: { a: 5, b: 6 } } },
      // ... 更多数据
    ]);

    // 将 details 对象标记为原始对象
    items.forEach(item => {
      item.details = markRaw(item.details);
    });

    const sortedItems = computed(() => {
      return [...items].sort((a, b) => a.name.localeCompare(b.name));
    });

    return { sortedItems };
  },
};
</script>

在这个例子中，我们将每个列表项的 details 对象使用 markRaw 标记为原始对象。这样，即使 items 数组发生变化，details 对象也不会触发组件重新渲染，从而提高性能。因为 details 里的数据不再是响应式的，如果需要更新details 里的数据，需要手动触发更新。

注意事项:

markRaw 具有一定的副作用，因为它会阻止 Vue 追踪对象的更改。因此，在使用 markRaw 时，需要仔细考虑其影响，确保不会导致意外的行为。
markRaw 只能用于对象，不能用于基本类型。
markRaw 只能阻止对象本身被转换为 Proxy 对象，但不能阻止对象内部的属性被转换为 Proxy 对象。如果对象内部包含响应式数据，修改这些数据仍然会触发组件重新渲染。
markRaw 不会影响 reactive 创建的响应式对象。如果一个对象已经被 reactive 处理过，再使用 markRaw 没有效果。

使用表格总结 markRaw 的特性

特性	描述
阻止 Proxy 创建	将对象标记为原始对象后，Vue 将不会为其创建 Proxy 对象。
阻止依赖追踪	修改被 `markRaw` 标记的对象上的属性不会触发依赖追踪，即不会通知依赖于该对象的 effect 函数重新执行。
性能优化	通过避免不必要的 Proxy 创建和依赖追踪，可以提高 Vue 应用的性能。
适用场景	存储大型、不可变的数据，优化性能瓶颈，与非响应式系统集成。
副作用	阻止 Vue 追踪对象的更改，可能导致意外的行为。
适用类型	仅适用于对象类型。
对 `reactive` 影响	如果对象已经被 `reactive` 处理过，再使用 `markRaw` 没有效果。
内部原理	在对象上添加一个特殊的标记 `__v_skip`，告诉 Vue 响应式系统忽略该对象。

`shallowReactive` 和 `markRaw` 的对比

shallowReactive 和 markRaw 都用于控制 Vue 的响应式行为，但它们的作用范围和使用场景有所不同。

特性	`shallowReactive`	`markRaw`
响应式深度	仅对对象的顶层属性进行响应式处理。嵌套对象不会被转换为 Proxy 对象。	彻底阻止对象被转换为 Proxy 对象。无论对象是否嵌套，都不会进行响应式处理。
依赖追踪	顶层属性的读取和修改会触发依赖追踪。	阻止依赖追踪。修改被 `markRaw` 标记的对象上的属性不会触发依赖追踪。
使用场景	需要对对象的顶层属性进行响应式处理，但不需要对嵌套对象进行响应式处理。例如，一个对象包含一些配置数据和一些需要响应式更新的数据，可以使用 `shallowReactive` 对该对象进行处理，只对需要响应式更新的数据进行追踪。	彻底不需要响应式更新的对象。例如，第三方库返回的数据，或者一些静态配置数据，这些数据通常不需要响应式更新，使用 `markRaw` 可以避免不必要的性能开销。
对嵌套对象的影响	嵌套对象仍然可以是响应式的，如果它们被 `reactive` 或 `shallowReactive` 处理过。	嵌套对象不会是响应式的，除非它们在被 `markRaw` 标记之前就已经被 `reactive` 或 `shallowReactive` 处理过。

简单来说，shallowReactive 是浅层次的响应式，只对顶层属性生效，而 markRaw 是彻底的非响应式，完全阻止对象被转换为 Proxy。选择使用哪个 API 取决于具体的场景和需求。

最佳实践建议

谨慎使用 markRaw： 只有在真正不需要响应式更新的情况下才使用 markRaw。过度使用 markRaw 可能会导致应用逻辑变得复杂，难以维护。
优先考虑使用 shallowReactive： 如果只需要对对象的顶层属性进行响应式处理，可以优先考虑使用 shallowReactive，而不是 markRaw。
结合性能分析工具： 使用 Vue Devtools 等性能分析工具，找出应用中的性能瓶颈，并根据实际情况选择合适的优化策略。
文档化你的决策： 在代码中添加注释，说明为什么使用 markRaw 以及它带来的影响，方便后续维护。

总结：合理使用，精准优化

markRaw 是 Vue 3 中一个强大的 API，可以帮助我们绕过 Proxy 代理和依赖追踪，从而提高应用性能。然而，markRaw 也具有一定的副作用，需要谨慎使用。只有在充分理解其原理和适用场景的情况下，才能发挥其最大的价值。

避免不必要的响应式，提升应用运行效率

合理使用 markRaw 能够避免不必要的响应式处理，特别是在处理大型数据对象或与非响应式库集成时，可以显著提升应用的性能和运行效率。

深入理解原理，灵活应用优化策略

通过深入理解 markRaw 的底层原理，我们可以更加灵活地应用它，结合其他优化策略，构建出更加高效和稳定的 Vue 应用。

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