Vue3：对ref、reactive的一个性能优化API

一、情景说明

我们知道，在Vue3中，想要创建响应式的变量，就要用到ref、reactive来包裹一下数据即可。
但是，这里有个损耗性能的地方
就是，被它包裹的数据，都会构建成响应式的，无论多少层次，多少字段

那么，如果有一天，我们需要的只是的修改第一层的数据，深层次的数据，只做展示（只读）
这样，整体构建成响应式数据就是一种损耗

这个时候，就可以用shallowRef、shallowReactive来优化

二、案例

shallowRef用法

let myVar = shallowRef(initialValue);

shallowReactive用法

const myObj = shallowReactive({ ... });

三、总结

通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。