Vue中ref、reactive、toRef、toRefs的区别

一、ref、reactive

setup 函数中默认定义的变量并不是响应式的（即数据变了以后页面不会跟着变），如果想让变量变为响应式的变量，需要使用 ref 和 reactive 函数修饰变量。

• ref 函数可以把基本类型变量变为响应式引用
• reactive 函数可以把复合类型的变量变为响应式的引用。

1.ref：

• ref用于为数据添加响应式状态，本质是将一个数据变成一个对象，这个对象具有响应式特点。
• 获取数据值需要加.value
• 因为reactive只能传入对象类型的参数，所以基本数据类型添加响应式状态只能用ref（ref也可以定义复杂的数据）
  ref底层使用的是proxy代理函数实现双向绑定，proxy 函数必须要接收一个对象，如果想修改 name 的值，需要使用 name.value。

2.relative

二、toRef、toRefs

1.toRef:

• 只希望转换一个reactive对象中的属性为ref, 那么可以使用toRef的方法
• toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性。
  toRef当数据发生改变时，界面不会自动更新
• 获取数据值需要加.value

2.toRefs

• 我们希望将对象的多个属性都变成响应式数据，并且要求响应式数据和原始数据关联，并且更新响应式数据的时候不更新界面，就可以使用toRefs，用于批量设置多个数据为响应式数据。
•