Vue3的ref、reactive、toRefs、toRef响应式

首先：ref和reactive都是用来声明响应式数据的。

??他们的区别在于，ref用于声明基本数据类型，而reactive用于声明引用类型数据，虽然reactive也是可以传递基础数据类型，但数据类型不会被包装成响应式数据

??以下代码为reactive的基本使用：↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 ??以下代码为ref的基本使用：↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

PS:注意通过ref声明的变量，所以js要修改对应的值是要通过.value访问才可以，template模板不需要通过.value访问

let { name } = toRefs({ name: "你好" });//此处的toRefs中的参数并非响应式数据

let { age } = toRefs(obj);//此处的toRefs中的参数是响应式数据

当toRefs的参数并非响应式数据时，其解构出来的数据并非响应式数据，只有参数为响应式数据时，其解构出来的数据才会是响应式数据，toRef同理。