开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情
生命周期对比
浅响应式shallowReactive与shallowRef
shallowReactive 只处理了对象内最外层属性的响应式(也就是响应式)
shallowRef 只处理了value的响应式, 不会对对象的reactive处理
一般情况下使用ref和reactive
如果一个对象数据,结构比较深,但是变化时,只是外层属性变化 ,则使用shallowReactive
如果一个对象数据,后面会产生新的对象来天花 shallowRef
深只读数据与浅只读数据readonly shallowReadonly
获取只读数据
获取一个对象(响应式或纯对象) 或ref并返回原始代理的只读代理
只读代理是深层的: 访问的任何嵌套property也是只读的
toRaw markRaw
toRaw:返回有由reactive或readonly方式转换成响应式的代理对象
还原方法,可用于临时独居没访问不会被代理与跟踪,写入时也不会触发界面的更新
toRaw: 得到reactiv代理对象的目标数据对象
markRaw标记一个对象,使其不会转换为代理,返回对象的本身
有些值不应该被设置成响应式的,复杂的第三方实例或者vue组件的对象
渲染不可变数据源的大列表,跳过了代理,可以提高性能
roRef
为源响应式对象上的某个值,属性创建一个ref对象
内部操作同一个数据源,拷贝一份新的数据值单独的进行操作,更新的时候互相不影响
customRef
创建了一个自定义的ref,并对其依赖想跟踪和更新触发进行显示的控制
provide与inject爷孙组件通信
const color = ref('red');
provide('color', color)
const color = inject('color')
响应式数据的判断
isRef: 检查一个值是否为ref对象
isReactive: 检查一个对象是否是创建的响应式的代理
isReadonly:检查一个对象是否间的代理有readonly创建的只读代理
isProxy: 检查一个对象是否由reactive或readonly方法创建的代理
