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

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

大家好，今天我们来深入探讨Vue.js中一个非常重要的性能优化工具：markRaw。很多开发者可能只是简单地知道它可以用来跳过响应式代理，但对于其背后的原理和实际应用场景却不甚了解。本次讲座将从Proxy代理、依赖追踪的底层机制入手，逐步剖析markRaw的工作原理，并结合实际代码示例，展示如何在项目中合理地运用markRaw进行性能优化。

一、Vue的响应式系统：Proxy与依赖追踪

理解markRaw的作用，首先要对Vue的响应式系统有一个清晰的认识。Vue 3 使用了 Proxy 对象来实现数据劫持，从而能够追踪数据的变化并自动更新视图。

1.1 Proxy对象：数据劫持的核心

Proxy 对象允许你创建一个对象的代理，拦截并重新定义该对象的基本操作，例如读取属性（get）、设置属性（set）、删除属性（deleteProperty）等。在Vue中，当一个对象被转化为响应式对象时，Vue会创建一个 Proxy 代理该对象。

const rawData = {
  name: 'Vue',
  version: 3
};

const reactiveData = new Proxy(rawData, {
  get(target, key, receiver) {
    console.log(`Getting property: ${key}`);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log(`Setting property: ${key} to ${value}`);
    return Reflect.set(target, key, value, receiver);
  }
});

console.log(reactiveData.name); // 输出: Getting property: name  Vue
reactiveData.version = 3.2; // 输出: Setting property: version to 3.2

上面的代码演示了 Proxy 的基本用法。每次访问或修改 reactiveData 的属性时，都会触发 get 或 set 拦截器。Vue 利用这个机制来追踪数据的变化。

1.2 依赖追踪：连接数据与视图

仅仅数据劫持还不够，Vue还需要知道哪些视图依赖于哪些数据。这就是依赖追踪发挥作用的地方。当你在模板中使用响应式数据时，Vue会将该组件（或者更准确地说是组件的渲染函数）与该数据建立关联，形成一个“依赖关系”。

// 伪代码，展示依赖追踪的简化模型
let activeEffect = null; // 当前激活的 effect 函数（通常是组件的渲染函数）

function track(target, key) {
  if (activeEffect) {
    // 将 activeEffect 添加到 target[key] 的依赖列表中
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap);
    }

    let dep = depsMap.get(key);
    if (!dep) {
      dep = new Set();
      depsMap.set(key, dep);
    }

    dep.add(activeEffect); // 存储依赖关系
  }
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;

  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => {
      effect(); // 触发所有依赖该数据的 effect 函数
    });
  }
}

// 示例
let product = { price: 10 };
const targetMap = new WeakMap();

// 假设这是一个组件的渲染函数
function renderComponent() {
  console.log(`Price is: ${product.price}`); // 访问 product.price，触发 track
}

// 将 renderComponent 设置为当前激活的 effect 函数
activeEffect = renderComponent;
renderComponent(); // 首次渲染

// 修改 product.price，触发 trigger
product.price = 20; // 触发 trigger，renderComponent 重新执行

这段伪代码简化了Vue的依赖追踪过程。track 函数负责记录依赖关系，而 trigger 函数负责触发依赖更新。

1.3 响应式转换的开销

虽然 Proxy 和依赖追踪机制实现了强大的响应式功能，但它也带来了一定的性能开销。每次读取或修改响应式数据，都会触发 Proxy 的拦截器，并且需要进行依赖追踪。对于大型对象或者频繁更新的数据，这些开销可能会变得显著。

二、markRaw：绕过响应式系统的利器

markRaw 函数的作用很简单：标记一个对象为“原始对象”，使其跳过响应式系统的转换。也就是说，被 markRaw 标记的对象不会被 Proxy 代理，也不会参与依赖追踪。

import { reactive, markRaw } from 'vue';

const rawObject = { id: 1, name: 'NonReactive' };
const reactiveObject = reactive({ id: 2, name: 'Reactive' });

markRaw(rawObject);

const data = reactive({
  raw: rawObject,
  reactive: reactiveObject
});

data.raw.name = 'Changed'; // 不会触发视图更新
data.reactive.name = 'Changed'; // 会触发视图更新

console.log(data.raw.name); // 输出: Changed
console.log(data.reactive.name); // 输出: Changed

在上面的例子中，rawObject 被 markRaw 标记，因此对其属性的修改不会触发视图更新。而 reactiveObject 仍然是响应式的，对其属性的修改会触发视图更新。

三、markRaw 的应用场景

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

• 大型不可变数据： 当你需要处理大型数据结构，且这些数据在组件生命周期内不会发生改变时，可以使用 markRaw 来避免不必要的响应式转换开销。例如，地图数据、复杂的配置对象等。
• 第三方库的实例： 有些第三方库的实例本身就管理了内部状态，不需要Vue的响应式系统来干预。例如，一个canvas绘图库的实例、一个数据库连接对象等。
• 性能敏感的热点数据： 对于某些频繁更新的数据，如果其更新并不需要立即反映到视图上，或者可以通过其他方式手动更新视图，可以使用 markRaw 来避免不必要的依赖追踪。
• 避免循环引用导致的无限递归： 在一些复杂的数据结构中，可能会出现循环引用。响应式转换可能会陷入无限递归，导致性能问题甚至栈溢出。markRaw 可以用来打破循环引用。

3.1 大型不可变数据优化

假设你正在开发一个地图应用，需要加载一个包含大量地理坐标的JSON文件。这些数据通常不会在应用运行时发生改变。

<template>
  <div>
    <div v-for="coordinate in coordinates" :key="coordinate.id">
      {{ coordinate.latitude }}, {{ coordinate.longitude }}
    </div>
  </div>
</template>

<script>
import { ref, onMounted, markRaw } from 'vue';
import mapData from './mapData.json'; // 假设 mapData.json 是一个大型JSON文件

export default {
  setup() {
    const coordinates = ref([]);

    onMounted(() => {
      // 方案一：直接赋值，默认进行响应式转换
      // coordinates.value = mapData; // 性能可能较差

      // 方案二：使用 markRaw 避免响应式转换
      const rawMapData = markRaw(mapData);
      coordinates.value = rawMapData; // 性能更好
    });

    return {
      coordinates
    };
  }
};
</script>

在这个例子中，如果直接将 mapData 赋值给 coordinates.value，Vue 会递归地将 mapData 中的所有对象都转化为响应式对象，这会消耗大量的性能。使用 markRaw 可以避免这种开销。

3.2 集成第三方库

假设你使用一个第三方图表库，该库本身就管理了图表的数据和状态。你不需要Vue的响应式系统来管理这些数据。

<template>
  <div ref="chartContainer"></div>
</template>

<script>
import { ref, onMounted, markRaw } from 'vue';
import Chart from 'chart.js'; // 假设 chart.js 是一个图表库

export default {
  setup() {
    const chartContainer = ref(null);
    let chartInstance = null;

    onMounted(() => {
      const ctx = chartContainer.value.getContext('2d');

      // 使用 markRaw 避免 Chart 实例被响应式转换
      chartInstance = markRaw(new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      }));
    });

    // 可选：手动更新图表数据
    const updateChartData = (newData) => {
        chartInstance.data.datasets[0].data = newData;
        chartInstance.update();
    }

    return {
      chartContainer,
      updateChartData // 暴露更新方法
    };
  }
};
</script>

在这个例子中，我们将 Chart 实例使用 markRaw 标记，避免Vue将其转化为响应式对象。如果需要更新图表数据，我们可以手动调用 chartInstance.update() 方法。

3.3 避免循环引用

循环引用是指对象之间相互引用，形成一个环状结构。例如：

const a = {};
const b = {};

a.b = b;
b.a = a;

如果将 a 或 b 传递给 reactive 函数，Vue会尝试递归地遍历整个对象，直到遇到循环引用。这会导致无限递归，最终导致栈溢出。markRaw 可以用来打破这种循环引用。

import { reactive, markRaw } from 'vue';

const a = {};
const b = {};

a.b = b;
b.a = a;

// 使用 markRaw 避免循环引用导致的无限递归
markRaw(b); // 或者 markRaw(a)

const reactiveA = reactive(a);

console.log(reactiveA.b.a === a); // 输出：true (b 仍然是原始对象，没有被 Proxy 代理)

四、shallowReactive 和 shallowRef：更细粒度的控制

除了 markRaw 之外，Vue 还提供了 shallowReactive 和 shallowRef 函数，用于更细粒度地控制响应式转换。

函数	作用	适用场景
reactive	将对象转化为深度响应式对象。	默认的响应式转换方式，适用于大多数场景。
shallowReactive	将对象转化为浅层响应式对象。只有对象的顶层属性是响应式的，嵌套的对象不会被递归转化为响应式对象。	当你只需要追踪对象的顶层属性变化，而不需要追踪嵌套对象的属性变化时，可以使用 shallowReactive 来提高性能。例如，对于只读配置对象，只需要追踪顶层属性是否被修改即可。
ref	创建一个包含任意值的响应式引用。通过 .value 属性访问或修改该值。	用于将基本类型的值转化为响应式数据。
shallowRef	创建一个包含任意值的浅层响应式引用。只有对 .value 属性的赋值是响应式的，如果 .value 属性是一个对象，则该对象不会被递归转化为响应式对象。	当你只需要追踪 .value 属性的赋值操作，而不需要追踪 .value 属性所指向的对象的内部属性变化时，可以使用 shallowRef 来提高性能。例如，当 .value 属性指向一个大型对象，且该对象的内部属性变化不需要立即反映到视图上时。
markRaw	标记一个对象为原始对象，使其跳过响应式系统的转换。	适用于大型不可变数据、第三方库的实例、性能敏感的热点数据以及避免循环引用导致的无限递归等场景。

示例：shallowReactive

import { reactive, shallowReactive } from 'vue';

const data = {
  name: 'Vue',
  version: {
    major: 3,
    minor: 2
  }
};

const reactiveData = reactive(data);
const shallowReactiveData = shallowReactive(data);

reactiveData.version.major = 4; // 触发视图更新
shallowReactiveData.version.major = 4; // 不触发视图更新

reactiveData.name = 'Vue 3'; // 触发视图更新
shallowReactiveData.name = 'Vue 3'; // 触发视图更新

示例：shallowRef

import { ref, shallowRef } from 'vue';

const obj = { name: 'Vue' };

const reactiveRef = ref(obj);
const shallowRefData = shallowRef(obj);

reactiveRef.value.name = 'Vue 3'; // 触发视图更新
shallowRefData.value.name = 'Vue 3'; // 不触发视图更新

shallowRefData.value = { name: 'React' }; // 触发视图更新

五、使用 markRaw 的注意事项

• 谨慎使用： markRaw 是一把双刃剑。虽然它可以提高性能，但过度使用可能会导致视图更新不及时，甚至出现错误。
• 理解其影响： 在使用 markRaw 之前，务必理解其对数据响应式的影响。确保你知道哪些数据需要响应式更新，哪些数据不需要。
• 手动更新： 如果使用了 markRaw，并且需要手动更新视图，可以使用 forceUpdate 或者其他方式来触发组件重新渲染。
• 避免滥用： 只有在真正需要优化性能时才使用 markRaw。不要为了优化而优化，导致代码可读性和可维护性下降。

六、常见问题与解答

• markRaw 标记的对象可以再次变为响应式对象吗？
  不可以。markRaw 标记的对象会永久地变为原始对象，无法再次转化为响应式对象。

• markRaw 标记的对象可以被 reactive 包裹吗？
  可以，但是没有意义。reactive 会忽略 markRaw 的标记，直接返回原始对象。

• 在什么情况下不应该使用 markRaw？
  当数据需要被响应式追踪，并且其变化需要立即反映到视图上时，不应该使用 markRaw。

七、代码示例：优化大型列表渲染

假设你有一个大型列表，每个列表项包含大量数据。如果每次更新列表中的一个项，都会导致整个列表重新渲染，这会非常耗费性能。可以使用 markRaw 来优化这种情况。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <input type="text" v-model="item.name" @input="updateItemName(item)" />
      </li>
  </ul>
</template>

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

export default {
  setup() {
    const itemsData = Array.from({ length: 1000 }, (_, i) => ({
      id: i,
      name: `Item ${i}`,
      description: 'Some description',
      // ... 更多属性
    }));

    // 将所有 item 标记为 raw
    const items = ref(itemsData.map(item => markRaw(item)));

    const updateItemName = (item) => {
      // 手动更新视图，避免整个列表重新渲染
      // 方案一：重新赋值（性能可能仍然较差，取决于Vue的diff算法）
      // items.value = [...items.value];

      // 方案二：使用forceUpdate (需要获取组件实例，不推荐在composition API中使用)
      // this.$forceUpdate();

      //方案三：使用一个reactive的属性来触发更新（推荐）
      triggerUpdate.value = !triggerUpdate.value;
    };

    const triggerUpdate = ref(false);

    return {
      items,
      updateItemName,
      triggerUpdate,
    };
  },
  watch: {
    triggerUpdate() {
      // 触发组件重新渲染
    }
  }
};
</script>

在这个例子中，我们将每个列表项都使用 markRaw 标记，避免Vue将其转化为响应式对象。当 item.name 发生改变时，我们手动触发组件重新渲染，只更新发生改变的列表项，而不是整个列表。

绕过 Proxy，避免不必要的依赖追踪

markRaw 的核心在于它绕过了 Vue 的响应式系统，避免了 Proxy 代理和依赖追踪的开销，从而在特定场景下显著提升性能。

性能优化需谨慎，结合实际情况选择

合理使用 markRaw 可以有效优化 Vue 应用的性能，但需要充分理解其原理和适用场景，避免过度优化导致代码可维护性降低。

更细粒度的响应式控制，shallowReactive 和 shallowRef

除了 markRaw，Vue 还提供了 shallowReactive 和 shallowRef 等 API，用于更细粒度地控制响应式转换，满足不同的性能优化需求。

理解底层原理，灵活运用工具

深入理解 Vue 响应式系统的底层原理，可以帮助我们更好地运用 markRaw 等工具，编写出高效、可维护的 Vue 应用。

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