vue3 新属性 ref、reactive、toRef、toRefs

前序

新增setup（）， this不起作用，属性和方法都可以在其里定义，ref只能一个个属性添加，而且访问时要使用属性.value,reactive可以定义多个属性，访问属性时不需要加.value。toRef只能一个个定义，而且不能template响应式，…toRefs能定义多个属性，而且能响应式，直接取属性名。

reactive：

用来将一个对象或者数组的内部变为响应式结构，但本身不是响应式。
例如：let obj = reactive({}); obj = {};
这样obj就指向其他对象， 所以reactive只能监听对象内部属性的变化

ref

一般用来将基本类型变为响应式，如Number、String、Bool、null，例如：let tag = ref(false)，实际上vue3还是把它转换成了这样一个对象：tag = { value: false }。因此在访问的时候需要加上value，而在tmplete中访问tag的时候vue3会自动加上value属性，所以只需要输入变量名即可双向绑定。

toRef

用来将一个reactive的属性变为响应式属性。
啥意思？
let person = {
name1: …
name2: …
…
}
return {person}
这样在template中去获取值得话就得：person.name1,person.name2,person.name3。。
很麻烦，所以可以在return的时候这样写：
return {
name1: toRef(person.name1),
name2: toRef(person.name2),
…
}

toRefs

实践中上面的toRef更多的是用在给属性改名的情况，对于这种有很多属性的对象一个个去toRef太麻烦了，所以直接：
return {
…toRefs(person)
}
那三个点的意思是解构，而响应式对象在结构后会丧尸它的响应能力，也就是变成一个普通对象，这样以来就失去了vue的双向绑定功能，而toRefs的作用就是将一个响应式对象变为普通对象，而将响应式对象的所有属性变为响应式属性（相当于给每个属性用了一个toRef）