Vue3 的 markRaw

为什么需要 markRaw？

性能优化：某些对象（如大型数据结构、第三方库返回的对象等）不需要被 Vue 的响应式系统管理。将这些对象标记为原始对象可以避免不必要的性能开销。
避免不必要的副作用：某些对象可能不应该被 Vue 修改，例如来自外部库的数据结构，这些数据结构可能依赖于其内部状态的一致性。

如何使用 markRaw？

markRaw 可以在 @vue/reactivity 包中找到，也可以直接从 vue 包中导入。

import { markRaw } from 'vue';

const myObject = { message: 'Hello, World!' };
const rawObject = markRaw(myObject);

console.log(isReactive(rawObject)); // false

示例

假设我们有一个大型数据结构，我们不希望它变成响应式的：

import { reactive, markRaw } from 'vue';

const largeData = {
  items: Array.from({ length: 10000 }, (_, i) => ({ id: i, value: `Item ${i}` }))
};

const state = reactive({
  data: markRaw(largeData)
});

// 即使 `state.data` 被添加到响应式对象中，它仍然是原始对象
console.log(isReactive(state.data)); // false

注意事项

不可逆性：一旦一个对象被 markRaw 标记，就无法取消标记。这意味着该对象将永远保持非响应式。
嵌套对象：如果一个对象的某个属性被标记为原始对象，那么该属性将不会变成响应式，但对象的其他属性仍然会被转换为响应式。

实际应用场景

第三方库的数据：如果你从一个第三方库获取了一个复杂的数据结构，并且不希望 Vue 干预它的内部状态，可以使用 markRaw。
性能敏感的场景：处理大量数据时，避免不必要的响应式转换可以显著提高性能。
避免循环引用：某些情况下，对象之间可能存在循环引用，使用 markRaw 可以避免 Vue 在处理这些对象时陷入无限递归。