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：

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

  • 应用场景:

    • 有些值不应被设置为响应式的，例如复杂的第三方类库等。
    • 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。