Vue3 响应式数据深入解读：reactive 和 ref 函数详解

2024-01-12 14:53:35

响应式数据在 Vue3 中的重要性

在 Vue3 中，响应式数据是构建交互式用户界面的基石。通过使用响应式数据，您可以轻松地将数据绑定到 UI，每当数据发生变化时，UI 都会自动更新。创建响应式数据有两种主要方法：reactive 函数和 ref 函数。

reactive 函数将普通 JavaScript 对象转换成响应式对象。这意味着当响应式对象的属性发生更改时，Vue 会自动检测这些更改，并更新所有依赖该属性的 UI 元素。

使用 reactive 函数非常简单，只需要将普通 JavaScript 对象作为参数传递即可：

const person = reactive({
  name: 'John Doe',
  age: 30
});

现在，person 对象就是响应式对象了。当 person.name 或 person.age 发生变化时，Vue 会自动检测到这些变化，并更新所有依赖这些属性的 UI 元素。

ref 函数创建响应式引用，该引用指向另一个值。当响应式引用的值发生变化时，Vue 会自动检测到这些变化，并更新所有依赖该引用的 UI 元素。

使用 ref 函数也很简单，只需将一个值作为参数传递即可：

const name = ref('John Doe');

现在，name 就是响应式引用了。当 name 的值发生变化时，Vue 会自动检测到这些变化，并更新所有依赖 name 的 UI 元素。

虽然 reactive 函数和 ref 函数都是用来创建响应式数据的，但它们之间还是有一些区别：

响应深度： reactive 函数创建的响应式对象是深层次响应的，这意味着对象的属性及其嵌套属性都是响应式的。而 ref 函数创建的响应式引用是浅层次响应的，这意味着只有引用的值是响应式的，引用的值中的属性不是响应式的。
可重新赋值： reactive 函数创建的响应式对象不能被重新赋值，而 ref 函数创建的响应式引用可以被重新赋值。