`toRaw` 与 `markRaw`：Vue3 响应式系统的细粒度控制

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

在 Vue3 中，toRaw 和 markRaw 是用于处理响应式数据的两个 API。

toRaw

toRaw 函数用于获取响应式对象的原始数据。如果你有一个响应式对象，并且想要在不触发任何响应式更新的情况下访问或修改其原始数据，可以使用 toRaw。

使用 toRaw

import { reactive, toRaw } from 'vue';const state = reactive({
foo: 1,
bar: {
baz: 2
}
});const rawState = toRaw(state);// rawState 是 state 的原始数据，对 rawState 的修改不会触发视图更新
rawState.foo = 2; // 非响应式

markRaw

markRaw 函数用于标记一个对象，使其永远不会转换为响应式对象。这在某些情况下很有用，比如当你知道某个对象不需要响应式处理，或者你想避免 Vue 对其进行依赖追踪和变更通知。

使用 markRaw

import { markRaw, reactive } from 'vue';const rawObject = { foo: 1 };// 标记 rawObject 为永远不转换为响应式对象
markRaw(rawObject);const state = reactive({
raw: rawObject
});// 即使 rawObject 被放在响应式对象中，它也不会是响应式的
state.raw.foo = 2; // 非响应式

适用场景

• toRaw 适用于当你需要访问或修改响应式对象的原始数据，而不触发视图更新时。
• markRaw 适用于当你确定某个对象不需要响应式处理，或者为了性能优化而避免不必要的响应式转换时。

总结

• toRaw 允许你获取响应式对象的原始数据，而不影响其响应式状态。
• markRaw 允许你标记一个对象，使其永远不会成为响应式对象。
• 这两个 API 提供了对 Vue 响应式系统的更细粒度的控制，允许开发者根据需要优化性能或处理特殊情况。