首页 > 其他分享 >【Vue3】ref, reactive, shallowRef, shallowReactive, toRaw, markRaw, readonly, shallowReadonly, isRef,

【Vue3】ref, reactive, shallowRef, shallowReactive, toRaw, markRaw, readonly, shallowReadonly, isRef,

时间:2022-10-29 22:27:26浏览次数:55  
标签:shallowReadonly reactive isReadonly toRaw 响应 isRef shallowRef ref

ref 的实现

  1. ref实现响应式(基本类型)也是采用Object.definedProperty()来实现的 getter和setter
  2. ref实现响应式(对象类型)也是采用Proxy来实现(底层调用reactive方法)

reactive 的实现

  1. reactive是采用Proxy来实现 只能对引用类型生效,如对象数组。
  2. 数组异步赋值问题会导致响应式失效,可以通过push方法改变数据。或者将数组包裹在对象中。

ref 和 reactive 的区别

  1. ref 支持所有类型,reactive只支持引用类型。
  2. ref 取值都需要加.value(模板里是不需要加.value的) , 而reactive不需要加。

ref 和 shallowRef 的区别(shallowReactive同理)

  1. ref是深层次的响应式。
  2. shallowRef是浅层次的响应式(只有第一层数据是响应式),只能监听到.value就结束了。或者手动调用triggerRef()触发视图更新
  3. ref和shallowref不能一起写 不然会造成shallowref的更新(因为triggerRef()方法的影响)

ref 和 Ref 的区别

  1. Ref是TS对应的接口,申明类型的时候使用。

toRaw 和 markRaw

  1. toRaw会脱去Proxy的外衣,使其失去响应式
  2. 给响应式对象添加新属性,markRaw可以给响应式对象添加非响应式的新属性

readonly 和 shallowReadonly

  1. readonly所有层级的属性都不允许修改
  2. shallowReadonly只有第一层级的属性不允许修改

判断响应式数据

  1. isRef, isReactive, isReadonly, isProxy

标签:shallowReadonly,reactive,isReadonly,toRaw,响应,isRef,shallowRef,ref
From: https://www.cnblogs.com/wanglei1900/p/16840028.html

相关文章