Vue3 中常用的 Composition(组合)API-toRaw 与 markRaw

toRaw 与 markRaw

raw 中文译为原始的意思，那么 toRaw 就是把 xx 变成原始，markRaw 就是把 xx 标记为原始

下面简单介绍下这两个 API 的作用

引入 toRaw 与 markRaw

先要使用就得先引入:

  import {toRaw,markRaw} from "vue";

toRaw 处理 reactive 属性

可以使用 toRaw 使得 reactive 响应式数据变成原始数据：

发现 person 对象已经变成了原始数据了

toRaw 处理 ref 属性

既然 toRwa 可以处理 reactive 属性，那么是否可以处理 ref 属性呢，我们也可以验证下。

也是可以的，但是不同的版本处理不同，可能有的低点的 vue3 版本在这里就不是一个引用对象，而是一个 undefined

markRaw 禁止属性改变

标记一个对象，使其永远不会再成为响应式对象。

markRaw 可以让对象变成最原始的，它不同于 readonly，readonly 是改都改不了，markRaw 可以让数据改变，但是 vue 不再监视

现在是可以正常修改属性的

使用 markRaw 修改属性，再次修改已经修改不了了

总结

• toRaw：

• 作用：将一个由reactive生成的响应式对象转为普通对象。

• 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。

• markRaw：

• 作用：标记一个对象，使其永远不会再成为响应式对象。

• 应用场景:

• 有些值不应被设置为响应式的，例如复杂的第三方类库等。

• 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。