Vue3 中常用的 Composition(组合)API-shallowReavtive 和 shallowRef

shallowReavtive 和 shallowRef

shallow 中文译为浅层次的，

引入 shallowReavtive 和 shallowRef

想要使用 shallowReavtive 和 shallowRef，也是需要先引入的

  import {shallowReactive,shallowRef} from "vue";

shallowReavtive 和 reavtive

shallowReavtive 定义对象类型数据，只考虑第一层响应式，里面的不考虑

如果使用 shallowReavtive 定义对象，由于 shallowReavtive 是浅层次的，只能处理第一层属性，嵌套对象属性是不处理的

一级属性 name 和 age 都能修改，但是嵌套属性 sal 是不能修改的

所以 shallowReavtive 和 reavtive 区别就是：shallowReavtive 只能处理浅层气的数据，但是 reavite 可以处理多层次的数据

shallowRef 和 ref

如果定义普通数据类型，nameshallowRef 和 ref 是没有区别的

但是如果定义的是对象类型，那么 shallowRef 就无效了

下面把 ref 换成 shallowRef

发现没用了

由此可见，ref 可以处理普通类型数据和对象类型数据，但是 shallowRef 只能处理普通类型的数据。

总结

• shallowReactive：只处理对象最外层属性的响应式（浅响应式）。

• shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

• 什么时候使用?

• 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。

• 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。