TypeScript---Composition API(其它部分)学习笔记

shallowReactive 与 shallowRef

shallowReactive : 浅劫持，只处理了对象内最外层属性的响应式(也就是浅响应式)

reactive：深度劫持（深监视），深度响应式。

shallowRef: 浅劫持，只处理了value的响应式, 不进行对象的reactive处理

ref:深度劫持（深监视），深度响应式，做了reactive处理

应用：

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

如果有一个对象数据, 后面会产生新的对象来替换 ===> shallowRef

readonly 与 shallowReadonly

readonly：深度只读数据。获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理。只读代理是深层的：访问的任何嵌套 property 也是只读的。

shallowReadonly：浅只读数据。创建一个代理，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换。

应用场景:

在某些特定情况下, 我们可能不希望对数据进行更新的操作, 那就可以包装生成一个只读代理对象来读取数据, 而不能修改或删除

toRaw 与 markRaw

toRaw：把代理对象变成普通对象，数据变化，界面不变化。

返回由 reactive或 readonly方法转换成响应式代理的普通对象。这是一个还原方法，可用于临时读取，访问不会被代理/跟踪，写入时也不会触发界面更新。 

markRaw：markRaw标记的对象数据，从此以后都不能再成为代理对象了

应用场景:

有些值不应被设置为响应式的，例如复杂的第三方类实例或 Vue 组件对象 ===>toRaw

当渲染具有不可变数据源的大列表时，跳过代理转换可以提高性能===>markRaw

toRef

为源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的。

区别ref:拷贝了一份新的数据值单独操作, 更新时相互不影响。

应用: 当要将 某个prop 的 ref 传递给复合函数时，toRef 很有用。

customRef

创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。

provide 与 inject

provide和inject提供依赖注入，实现跨层级（祖孙）间通信。

参考：https://24kcs.github.io/vue3_study/chapter4/02_Composition%20API_%E5%85%B6%E5%AE%83%E9%83%A8%E5%88%86.html