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

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

• • `toRaw`
  • • [使用 `toRaw`](#使用 toRaw)
  • `markRaw`
  • • [使用 `markRaw`](#使用 markRaw)
  • 适用场景
  • 总结

在 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 响应式系统的更细粒度的控制，允许开发者根据需要优化性能或处理特殊情况。