Vue3主要的响应类方法(ref、reactive、toRef、toRefs)

1.Vue.ref()

1.1.可以为单个属性添加响应式状态。
1.2.可以为对象添加响应式状态，当给对象的某个属性单独ref后，改变后的属性值不会同时改变原始值。
1.3.访问数据值，需要添加.value。
1.4.原始数据的拷贝。(原始数据不被改变)

2.Vue.reactive()

2.1.给对象添加响应式状态
2.2.访问数据值，不需要添加.value。
2.3.原始数据的拷贝。(原始数据不被改变)

3.Vue.toRef()

主要为对象添加单个响应式属性

3.1.可以接收响应对象，为响应对象上的属性新建单个响应式ref，保持对其源对象属性的响应式连接。
3.2.可以接收非响应对象(普通对象)，对单个属性添加响应式ref。但是这个响应式ref的改变不会更新界面。
3.3.访问数据值，需要添加.value。
3.4.roRef后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据。

4.Vue.roRefs()

4.1.只接收响应式对象，否则发出警告。
4.2.将原响应对象转换为普通对象，可解构，但不丢失响应式。
4.3.可以将reactive方法返回的响应式数据给toRefs(),再来进行解构。
4.4.访问数据值，需要添加.value。
4.5.toRefs后的ref数据不是原始数据的拷贝，是引用，改变结果数据的值也会同时改变原始数据。

 

总结：目前用得最多的还是使用ref和reactive来创建响应式对象，使用toRefs来转换成可以方便使用的解构的对象。