Vue3中常用的Composition(组合)API-reactive(响应式)函数

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 实现，通过代理对象操作源对象内部数据进行操作。