vue3组合api响应式记录

reactive

返回对象的响应式副本

const obj = reactive({ count: 0 })

响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中，返回的 proxy 是不等于原始对象的。建议只使用响应式 proxy，避免依赖原始对象。

ref

接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value。
实际使用中也可以包裹对象。官方推荐我们在定义数据的时候,reactive定义复杂的数据类型的数据,ref推荐定义基本数据类型。就是需要注意内部访问的值不一样。ref类型在底层会自动转换成reactive类型
ref的本质是拷贝，与原始数据没有引用关系

toRef

可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。
使用toRef将某个对象中的属性变成响应式数据，修改响应式数据是会影响到原始数据的。如果修改通过toRef创建的响应式数据，并不会触发UI界面的更新，但解构后就可以关联。

toRefs

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。
希望将对象的多个属性都变成响应式数据，并且要求响应式数据和原始数据关联，并且更新响应式数据的时候不更新界面，就可以使用toRefs，但解构后就可以关联。用于批量设置多个数据为响应式数据。(toRef一次仅能设置一个数据)
toRefs接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用toRef执行。

  
  
  
  


  

    
ref方式
    
名称：{{ obj.name }}
    
数量：{{ obj.count }}
    
reactive方式
    
名称：{{ obj1.name }}
    
数量：{{ obj1.count }}
    
toRefs方式
    
名称：{{obj2.name }}
    
数量：{{ obj2.count }}
    
toRefs解构方式
    
名称：{{name }}
    
数量：{{ count }}
  ref方式增加
  reactive方式增加
  toRefs增加
  toRefs解构增加
  setup内增加