响应式基础
响应式基础
Vue3 的响应式系统基于 JavaScript 的 Proxy 特性，相比于 Vue2 中的 getter 和 setter，实现了更快的响应速度和更少的内存消耗。
响应式数据
在 Vue3 中，响应式数据是通过 reactive() 函数创建的。reactive() 函数会返回一个响应式对象，这个对象上的属性可以被监听和改变。当对象上的属性被修改时，Vue3 会使用 Proxy 对象来拦截属性访问和修改操作，从而实现属性的响应式。
除了 reactive() 函数，Vue3 还提供了一些其他的响应式相关的方法和属性，例如：
- ref()：用于创建原始数据类型（如数字、字符串、数组、对象等）的响应式引用，返回一个响应式对象。
- reactiveAttributes()：用于创建响应式属性的集合，可以同时监听多个属性的变化。
- toRef()：用于将响应式对象转换成 ref 对象，可以用于创建表单控件等需要双向绑定的场景。
- watch()：侦听响应式数据源，在数据源变化时触发回调函数。参考 watch 数据监听{target=_blank}
- 其他响应式 API 工具函数, 参考 响应式工具函数
ref()
ref() 函数接收一个参数并返回一个响应式对象。它将普通的 JavaScript 数据转换为一个可以被监视和观察的响应式对象。ref() 返回的是一个包装对象，我们可以通过 .value 访问其内部的实际值。例如：
import { ref } from "vue";
const count = ref(0); // count 是一个响应式对象，初始值为 0
console.log(count.value); // 输出 0
count.value++; // 修改 count 的值，这是Vue 3中必须使用 .value 进行操作
console.log(count.value); // 输出 1toRef()
toRef() 函数接收两个参数：一个源对象和一个属性名，并返回源对象上该属性的一个只读引用。这使得当源对象上的属性发生变化时，引用也会相应地更新。与 ref() 不同，toRef() 创建的引用与源对象直接绑定，一起响应变化。例如：
import { reactive, toRef } from "vue";
const user = reactive({ name: "Alice", age: 25 });
const ageRef = toRef(user, "age");
console.log(ageRef.value); // 输出 25
user.age = 30; // 修改 user 对象的 age 属性
console.log(ageRef.value); // 输出 30reactive()
reactive() 函数接收一个普通的 JavaScript 对象（或数组）作为参数，并返回一个响应式代理对象。通过该代理对象访问原始对象的属性时，会自动进行依赖追踪，并在属性变化时触发更新。例如：
import { reactive } from "vue";
const data = reactive({ count: 0 });
console.log(data.count); // 输出 0
data.count++; // 修改 data 对象的 count 属性
console.log(data.count); // 输出 1这些函数是 Vue 3 提供的主要响应式数据处理函数，能够帮助开发者轻松地创建响应式对象以及观察其变化。使用这些函数可以简化数据的管理与操作，并使代码更具可读性和可维护性。
响应式原理
Vue3 的响应式原理主要基于 Proxy 和 Reflect
首先，Vue3 使用了 ES6 的 Proxy 对象来创建响应式数据。Proxy 可以拦截并定义在对象上的基本操作的自定义行为。这意味着当对象的某个属性被读取或赋值时，Proxy 可以拦截这些操作，并触发相应的处理逻辑。这与 Vue2 中使用的 Object.defineProperty 不同，后者只能劫持对象的属性访问，而无法监听数组的变化或者新增属性的变化。
其次，Vue3 利用了 Reflect 对象，它是 Proxy 处理对象操作时的默认操作行为。通过 Reflect 可以更简单地对被代理的对象进行操作，比如获取属性值、设置属性值等。
Vue3 的响应式系统相较于 Vue2 有了很大的改进，它不仅提供了更强大和灵活的响应式能力，还解决了 Vue2 中存在的一些问题，如数组变化不敏感和对象新增属性非响应式的问题。通过使用 Proxy，Vue3 能够更好地处理复杂的数据结构，为开发者提供了更加完善的数据响应机制。