1. ref和reactive
ref创建：基本类型的响应式数据
- 作用：定义响应式变量
- 语法：
let xxx = ref(初始值) - 返回值：一个
RefImpl的实例对象，简称ref对象或ref,ref对象的value属性是响应式的 - 注意点：
JS中操作数据需要xxx.value,但模板中不需要.value,直接使用即可- 对于
let name = ref('张三')来说，name不是响应式的，name.value是响应式的
reactive定义对象类型的响应式数据
- 作用：只能定义对象类型
- 语法：
let xxx = reactive({xxx}) - 返回值： 一个
Proxy的实例对象，简称:响应式对象 - 注意点：
reactive定义的响应式数据是“深层次”的
ref定义对象类型的响应式数据
我们打开浏览器看下控制台,主要看下两个输出，reactive定义对象类型的响应式数据和ref定义的数据的输出：
可以看出来：ref定义的响应式数据的value输出其实也是Proxy定义的对象，所以ref虽说可以定义基本类型和对象类型，但是定义对象类型还是依赖于reactive
ref对比reactive
- 宏观角度：
ref用来定义：基本类型数据、对象类型数据reactive用来定义：对象类型数据
- 区别：
ref创建的变量必须使用.value(可以使用volar插件自动添加value,配置如下图：)
reactive重新分配一个新对象,会失去响应式（可以使用Object.assign去整体替换）
let obj = reactive({name: '小明'})
function changeObj(){
// obj = {name: '小红'} // 这么写页面不更新
// obj = reactive({name: '小红'}) // 这么写页面不更新
Object.assign(obj, {name: '小白'})
}
- 使用原则：
- 若需要一个基本类型的响应式数据，必须使用
ref - 若需要一个响应式对象，层级不深，
ref、reactive都可以 - 若需要一个响应式对象，且层级较深，推荐使用
reactive，（form表单数据推荐使用reactive）
2. toRefs和toRef
- 作用：将一个响应式对象中的每一个属性，转换为
ref对象 - 备注：
toRefs与toRef功能一致，但toRefs可以批量转换 -
假若
reactive定义的响应式对象属性过多，解构是比较好的选择，我们不需要person.xxx
a. 但是单纯的结构，相当于let name = person.name; let age = person.age,所以解构出来的变量不是响应式的，
b. 我们想要把解构的变量也变成响应式的，此时就需要用到toRefs和toRef,
c.toRefs是将reactive定义的响应式对象内的每一项都转换为响应式数据，toRef是转换单个数据
d. 注意，toRefs和roRef是将变量转换成ObjectRefImpl类型的数据，等同于ref定义的响应式数据，所以修改我们需要.value;我们在模板中就可以直接使用{{ name }}, {{ age }} - 语法如下：
![[概率论]四小时不挂猴博士](https://img-blog.csdnimg.cn/direct/7e6584ae35264f999035dc71194491e7.png)
