在 Vue 3 中，响应式系统是一个核心特性，它使得我们能够非常方便地追踪和处理状态的变化。在 Vue 3 中，引入了两个主要的API来创建响应式数据：ref 和 reactive。这篇文章将详细介绍这两个 API 的使用及其区别，同时提供一些代码示例。
1. ref API
ref 用于创建基本数据类型的响应式引用。它可以将基本类型（如字符串、数字、布尔值等）包装成响应式对象。在使用 ref 时，你需要通过 .value 属性来获取或设置值。这是因为 Vue 需要在其内部对数据进行追踪，因此采用了加上 .value 的方式来获取实际值。
使用示例
<template>
<div>
<p>当前计数: {{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 使用 ref 创建响应式变量
const count = ref(0);
// 定义增加计数的函数
const increment = () => {
count.value++;
};
return { count, increment };
}
}
</script>
在这个例子中，我们使用 ref(0) 创建了一个响应式的计数器 count。每当我们点击按钮时，increment 函数会被调用，更新 count 的值。在模板中，我们通过双花括号 {{ count }} 自动更新 UI。
2. reactive API
reactive 用于创建对象的响应式引用。当我们需要对一个复杂类型（如对象或数组）进行响应式处理时，reactive 是更合适的选择。与 ref 的 .value 不同，使用 reactive 创建的对象可以直接访问其属性，而不需要加上 .value。
使用示例
<template>
<div>
<p>名字: {{ user.name }}</p>
<p>年龄: {{ user.age }}</p>
<button @click="birthday">过生日</button>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
// 使用 reactive 创建响应式对象
const user = reactive({
name: '张三',
age: 25
});
// 定义过生日的函数
const birthday = () => {
user.age++;
};
return { user, birthday };
}
}
</script>
在这个例子中，我们使用 reactive 创建了一个响应式对象 user。通过直接访问 user.name 和 user.age，我们可以方便地获取和更新用户的信息。点击“过生日”按钮后，会调用 birthday 函数使得年龄自动加一，界面也会随之更新。
3. ref 与 reactive 的区别
- 使用场景：
ref适合用于基本数据类型，reactive用于对象和数组。 - 访问方式：使用
ref时需要通过.value属性访问值，而使用reactive时直接访问对象属性。 - 响应式变更：在
reactive中，如果直接替换整个对象（例如，user = { name: '李四', age: 30 }），则这个变更不会被追踪，需使用Object.assign或者其他方法来确保响应性。
结论
Vue 3 的 ref 和 reactive 提供了强大的响应式能力，让我们能够更方便地管理和更新状态。熟练掌握这两个 API 对于使用 Vue 3 开发应用至关重要。希望本文的介绍和示例能帮助你更好地理解和使用 Vue 3 的响应式特性。
