ref/reactive/shallowRef/shallowReactive

ref/reactive/shallowRef/shallowReactive

ref/reactive

ref的本质其实也是reactive ref(obj)等价于reactive({value:obj})

• ref

  • 会深度监听
  • 接受基础数据类型和对象类型
  • 它的基础数据类型：依靠Object.defineProperty的get和set实现响应式
  • 对象类型：基于reactive的函数实现响应式
  • 模板上应用和script内部应用存在区别

• reactive

  • 会返回一个深度监听的响应式对象
  • 传递的参数必须是一个对象，包括JSON数据和数据都可以，否则不具有响应式
  • 如果解构reactive定义的对象会丢失响应式，解构出来的如果是引用对象类型，是响应式的（解构的时候按引用传递），如果是基本数据类型，会丢失响应式（解构的时候按值传递）

  //直接赋值也会丢失响应式，甚至在Vue3中这种写法本来就是错误的
  
   // 当reactive 之后返回一个代理对象的地址被vue 存起来，
   // 用一个不恰当的比喻来说，就是这个地址具备响应式的能力
   const vue = reactive({ a: 1 })
   vue = { b: 2 }
   //  而当你对于vue重新赋值的时候不是将新的对象赋值给那个地址，而是将vue 换了个新地址
  

• shallowReactive

  • 只能监听数据的第一层

• shallowRef

  • 同样也是非深度监听
  • 可以包装基础数据类型和引用数据类型，但是基础数据类型只有一层，所以shallowRef基本正对引用类型去使用