【vue3 学习笔记】响应式：进阶

type

status

date

和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。
shallowRef() 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。

shallowRef()：只有第一层数据变了组件才会重新渲染，深层数据变了组件不会重新渲染，watch也监听不到变化。

简而言之就是第一层是响应式数据，非第一层数据不是响应式数据

上面的shallowRef()的作用是只有第一层数据变了才会重新渲染，那如果某种情况需要改变深层的某个数据怎么办？这时候就可以用triggerRef()改变深层数据时强制渲染组件。

shallowRef()和triggerRef()是一对死对头，前者是深层数据改变的时候不让重新渲染组件，后者则是深层数据改变的时候偏偏就要重新渲染组件。

customRef()：创建一个可以自己指定get和set方法的ref数据

customRef() 传入一个工厂函数，工厂函数中会有track和trigger两个参数，这两个参数都是函数。track是在get方法中触发，trigger是在set方法中触发。

track和trigger两个函数的作用就是将数据变成响应式，触发其他的方法，比如只有触发了track和trigger两个函数组件才会重新渲染，页面数据才会变。不然别的地方是不知道什么时候获取了数据，什么时候改变了数据。

和shallowRef()方法作用一样，shallowReactive()也是监听第一层数据，不一样的是数据是reactive数据，不是ref数据。shallowReadonly()是readonly数据，和前两数据刚好相反，只有第一层是不可修改的。

toRaw()方法的作用就是将数据打回原形，把身上的其他Vue监听方法都去掉，恢复到最原始的js数据。

toRaw() 可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象