Vue3 中常用的 Composition(组合)API-ref(引用) 函数

reactive(响应式)函数

它和 ref 类似，也是把数据定义成响应成数据

注意：它不同于 ref，只能定义对象类型的数据，不能定义基本类型的数据，所以说基本类型数据要使用 ref 定义，对象类型数据最好使用 reactive 函数

那么首先就可以验证只能使用 reavtive 定义基本类型数据这一说了

引用 reactive

和 ref 一样，直接引用即可

  // 引入ref和reactive函数  import {ref,reactive} from "vue";

接下来我使用 reactive 定义一个普通数据

控制台直接报错了

所以应该改成一个对象类型的数据，如果使用了 reactive 定义了，获取属性的时候直接获取即可，就不再使用.value 了

效果都是一样的

验证：深层次处理数据

reactive 是处理对象类型的响应式的时候，是一个深层次的

可以定义一个套娃式的对象，使用的使用直接套就行

验证：处理数组类型数据

首先定义一个数据类型的数据

这时候点击修改，数据没有变，但是其实已经修改了

之所以没有变是因为 vue 没有检测到，所以要定义成响应式的

再次测试下，发现已经改了，说明 reactive 也是支持数组的

reactive 定义数据技巧

如果非要使用 reactive 定义普通类型的数据，可以这么玩，把组件种用到的数据封装到一个对象里面，然后把这个对象交给 reavtive 修饰变成一个响应式对象或代理对象

效果也是一样的

reactive 总结

• 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）

• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy 的实例对象，简称 proxy 对象）

• reactive 定义的响应式数据是“深层次的”。

• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。