vue3之 shallowRef、markRaw

shallowRef 用于创建一个浅层响应式引用，只对顶层属性进行响应式处理。
markRaw 用于标记一个对象，使其完全跳过 Vue 的响应式系统。

这两者都可以用于优化性能，避免不必要的响应式开销，特别是在处理大型对象或第三方库对象时。

shallowRef

shallowRef 是 Vue 3 中的一个 API，用于创建一个浅层响应式引用。与 ref 不同，shallowRef 只会对其值的顶层进行响应式处理，而不会递归地将其内部的对象变成响应式的。

用法

import { shallowRef } from 'vue';const state = shallowRef({nested: {count: 0}
});// 只有 state 自身是响应式的，state.nested 不是响应式的
state.value.nested.count++; // 不会触发响应式更新

适用场景

• 当你有一个复杂的对象，但只需要对其顶层属性进行响应式处理时。
• 当你需要避免对大型对象进行深层次的响应式处理以提高性能时。

markRaw

markRaw 是 Vue 3 中的一个 API，用于标记一个对象，使其永远不会被 Vue 的响应式系统处理。被标记为 markRaw 的对象将完全跳过响应式转换。

用法

import { markRaw } from 'vue';const rawObject = markRaw({nested: {count: 0}
});// rawObject 及其所有嵌套属性都不是响应式的
rawObject.nested.count++; // 不会触发响应式更新

适用场景

• 当你有一个对象不需要响应式处理时。
• 当你需要将第三方库的对象（如 DOM 元素、图表实例等）排除在响应式系统之外时。

下面的例子不能使用 ref， ref 会将其值变成响应式对象，而组件对象不应该是响应式的。为了避免这个问题，可以使用 shallowRef 或者 markRaw 来处理组件对象。

示例：在 Vue 组件中使用 shallowRef 和 markRaw

使用 shallowRef

<template><div><button @click="toggleComponent">Toggle Component</button><component :is="currentComponent" /></div>
</template><script setup>
import { shallowRef } from 'vue';
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';const currentComponent = shallowRef(ComponentA);const toggleComponent = () => {currentComponent.value = currentComponent.value === ComponentA ? ComponentB : ComponentA;
};
</script>

使用 markRaw

<template><div><button @click="toggleComponent">Toggle Component</button><component :is="currentComponent" /></div>
</template><script setup>
import { ref, markRaw } from 'vue';
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';const ComponentA_raw = markRaw(ComponentA);
const ComponentB_raw = markRaw(ComponentB);const currentComponent = ref(ComponentA_raw);const toggleComponent = () => {currentComponent.value = currentComponent.value === ComponentA_raw ? ComponentB_raw : ComponentA_raw;
};
</script>