总结：ref，reactive，toRefs，toRef方法
响应式引用的原理：通过proxy对数据进行封装，当数据变化时，触发模版等内容的更新。
一、ref：
作用：接受一个内部值并返回响应式且可变的ref对象。ref对象具有指向
内部值的单个proxy.value。
- ref需要从Vue中引用才能使用。【const {ref} = Vue】
- ref一般定义基础类型数据
- 通过ref包装后需要通过value属性获取，proxy封装后变为 proxy{value:"xxx"}
- 模版中使用数据时，会自动调用value值，不需要使用value。
示例：
setup(){
const {ref} = Vue;
let name = ref('name');
return {
name,
}
}
二、reactive
1、作用：接受一个内部值并返回响应式且可变的对象。
- reactive 需要从Vue引用才能使用；
- reactive 一般定义非基础数据类型
- 通过reavtive包装数据，也就是proxy封装后变为proxy(数据)
示例：
setup() {
const {reactive} = Vue;
let arr = reactive([123]);
return {
arr
}
}
注：将数据解构之后再返回不具备响应式。
三、toRefs
1、toRefs原理：{name:'hello'}通过reactive包装变成 proxy({name:'hello'}),
再次通过toRefs包装后将变成为proxy({name:proxy({value:'hello'})})
示例：setup(){
const {reactive,toRefs} = Vue;
let obj = reactive({
name:'hello'
});
const {name} = toRefs(obj);
return{
name
}
}
注：toRefs封装，如果响应式数据中本身不存在某个数据，那么不会给一个默认的引用，
而是默认undefine，不具备响应式。
eg：
data{
name:'hello',
}
const {age} = toRefs(data)
此时 age不存在data中，所以不会给默认值，不具备响应式。
四、toRef
1、原理：toRef方法不需要解构，两个参数，一个总数据，一个获取的数据，
示例：setup(){
const {reactive,toRef} = Vue;
let obj = reactive({
name:'hello'
});
const age = toRef(obj,'age'); //这样定义，不需要哦解构
setTimeout(() => {
age.value = 18
},2000);
return {
age
}
}
此时，age变更后会有值，也会具备响应式。
