什么是响应式数据
“响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。
采用“数据劫持”结合“发布者-订阅者”模式的方式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
1.1：选项式API的响应式数据
<script> export default { data: () => ({ count: "abc", }), // 方法节点： methods: { changeCount() { this.count += "="; }, }, }; </script>
1.2：组合式API的响应式数据
<script setup> // 引入 API 函数 ref() import { reactive, ref, toRef, toRefs } from "vue"; // 数据源 let count = ref("abc"); // reactive 对原始数据类型是无效的 // let num = reactive("ABC"); let emp = reactive({ name: "Jack", age: 19, }); // 所有ref来审明对象类型的数据源 let obj = ref({ name: "张三", age: 18, }); // 使用 toref() 函数 let obj_two = { age: 20, }; let myTitle = toRef(obj_two, "age"); // 获取的时候，通过 .value console.log(myTitle.value); // 使用 toRefs() 函数 let state = reactive({ foo: 1, ber: 2, }); let stateAsRefs = toRefs(state); state.foo++; console.log(stateAsRefs.foo.value); // 方法节点： function changeCount() { console.log(count); // count.value += "="; // 修改对象类型的响应式数据 obj.value.age += 1; emp.age += 1; } </script>
1.3：ref() 函数
具体的使用看 1.2 中的代码
使用 ref() 方法，我们可以创建任意类型的响应式数据，获取时的需要通过 .value 来获取
当值为对象类型的时候，会用 reactive() 自动转换它的 .value
ref 接收一个内部值，并返回一个响应式的 ref 对象
任意类型 => 返回一个 ref 对象
参数可以传递任意数据类型，传递对象类型时，也能保持深度响应式，所以适用性可以大，在 setup 中定义数据时，推荐优先使用 ref，方便拆分逻辑和业务解耦
1.4：reactive() 函数
具体的使用看 1.2 中的代码
reactive() 函数只对，对象类型有效(对象，数组)，对 Number，String，Boolean 原始类型无效。
reactive() 函数接收一个普通对象，然后返回该普通对象的响应式代理；
用 user.name = “new name” 来修改值
内部基于 proxy 来实现
获取数据值的时候可以直接获取，不需要加 .value
参数只能传入对象类型
1.5：toRef() 函数
具体的使用看 1.2 中的代码
用于为源响应式对象上的属性新建一个 ref，从而保持其源对象的响应式；
接收两个参数：1. 源对象 2. 属性名，返回一个 ref 数据
例如：使用父组件传递的 props 数据，某个属性要保持响应式时。
Template(模板)中直接获取值，js 获取值，通过 .value 获取
toRef 后，ref 数据不是原始数据的拷贝，而是引用。改变结果，原数据的值也会同时改变。
不会触发 UL 界面的更新
1.6：toRefs() 函数
具体的使用看 1.2 中的代码
toRefs 用于将响应式对象转换为普通对象，但是其中的每个属性，都会指向原始对象的相应属性。就是依然保持响应式，常用于 es6 的解构赋值。因为在对一个响应式对象直接解构时，解构后的数据将不再有响应式，而使用 toRefs 可以解决这一个问题
获取数据值得时候需要加 .value
toRefs 后的 ref 数据，不再是原始数据饿拷贝，而是引用。改变数据的值也会改变原始数据的值。
作用其实和 toRef 类似，只不过 toRef 是一个个手动赋值，而 toRefs 是自动赋值
总结：
以上就是 vue3 响应式数据的原理和作用，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
