Vue3 ref 与 reactive

ref

ref

isRef(obj) 判断 obj 是否为 ref 对象

需要 .value 再范围值

源码逻辑，
createRef Ref对象会被直接返回
RefImpl 真正创建ref

toRaw / toReactive
如果参数是引用类型 则会去调用 reactive

ref 可绑定 DOM，可以省去原生的查找dom的操作

shallowRef

浅层响应式
只到.value

shallowRef 不能与 ref 一同写，因为ref 的更新会造成视图更新（triggerRefValue）
从而导致 shallowRef 的数据 被更新到视图

项目中 echarts 的 option 就用到了

customRef

track 收集依赖
trigger 触发依赖

reactive

只支持引用类型

reactive 本身是 proxy 代理，不能直接对齐整体赋值，这会破坏响应式对象。

readonly(obj) 获取只读的 reactive对象

源码逻辑：
保证引用类型
已被代理则直接返回
接着从weakMap缓存中找
如果在白名单中也会直接返回 markRaw 标记 __skip__
创建新的 Proxy 代理

手动实现简易版

shallowReactive

浅层响应式
只到第一层对象属性

跟 shallowRef 有着同样的问题，会被 reactive 影响

异同

两者都能构建响应式对象，但更新方式不同

• ref 通过 value 属性访问和修改内部值
• reactive 不需要.value 能直接用 .属性 的方式修改，但不能整体替换掉