---

1、使用ref创建基本类型的响应式数据

在 vue 的 setup 中直接定义变量是非响应式的，即：定义后无法再次修改（如：let name="Tom"）

如果要创建响应变量，需要通过 ref 实现，语法：

使用方式示例代码如下：

返回值：一个 RefImpl 的实例对象，简称 ref 对象或 ref，ref 对象的 value 属性是响应式的

注意：

① 在方法中操作数据需要：xxx.value，但模板中不需要 .value，直接使用即可；

② 对于 let name = ref('张三') 来说，name 不是响应式的，name.value 是响应式的。

2、使用ref创建对象类型的响应式数据

使用 ref 创建变量时，接收的数据不仅有基本类型，还可以是对象类型（若 ref 接收的是对象类型，其内部实际调用了 reactive 函数）。

3、使用reactive创建对象类型的响应式对象

虽使用 ref 既能创建响应式变量，又能创建响应式对象，但在 vue 中真正操作响应式变量的是 reactive，可通过 reactive 直接创建响应式对象，语法：

返回值是一个 Proxy 的实例对象，简称：响应式对象

使用方式示例代码如下：

注意：reactive 定义的响应式数据是“深层次”的，即：能够操作多维度的对象，比如：

4、ref对比reactive

① ref 即可以创建响应式的基本类型，又能创建响应式对象，reactive 只能创建响应式对象，若 ref 接收的是对象类型，其内部实际调用了 reactive 函数，如下所示

查看打印结果

② ref 创建的响应式对象，重新分配时使用 .value 即可

使用 reactive 创建的响应式对象，重新分配一个新对象，会失去响应式，需要使用 Object.assign 整体替换

③ ref和reactive的使用原则：

⑴ 若需要一个基本类型的响应式数据，必须使用 ref

⑵ 若需要一个响应式对象，层级不深， ref、 reactive 都可以

⑶ 若需要一个响应式对象，且层级较深，推荐使用 reactive

5、toRefs与toRef

如要要将 reactive 创建的响应式对象，解构给其它响应式变量，可以使用 toRefs 与 toRef

toRef 作用：指定响应式对象中的一个属性，将其转换为 ref 对象。

toRefs 作用：将一个响应式对象中的每一个属性，转换为 ref 对象。

备注： toRefs 与 toRef 功能一致，但 toRefs 可以批量转换。

语法如下：

实际案例：

如上所示，打印由 toRefs 转化得到的变量，具体如下：

注意：使用 toRefs 或 toRef 转换得到的 ref 对象是引用传递，通过 .value 操作转换得到的 ref 对象，源对象内部的值也会改变

多提一句，如果不需要引用传递，比如只想修改新获取的响应式变量，通过 ref() 即可完成，如下示例：