Vue 3 带来了许多强大的新特性，其中最令人瞩目的就是组合式 API（Composition API）。组合式 API 为开发者提供了更加灵活和可重用的方式来组织和管理组件的逻辑。在这一节中，我们将深入探讨 setup、ref 和 reactive 这三个重要的函数，帮助大家从零开始掌握 Vue 3。
1. setup 函数
setup 函数是组合式 API 的核心，是 Vue 组件的入口点。在组件实例创建之前执行，setup 中可以访问到 props 和 context。根据需要，开发者可以在这个函数中定义响应式数据、计算属性以及方法。
<template>
<div>
<h1>{{ message }}</h1>
<button @click="changeMessage">改变消息</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3!');
const changeMessage = () => {
message.value = '你好，Vue 3!';
};
return {
message,
changeMessage
};
}
}
</script>
在上面的代码示例中，我们首先使用 ref 创建了一个响应式的数据 message。在 changeMessage 函数中，我们对 message 的值进行了改变。通过 setup 返回对象中的数据和方法，我们可以在模板中直接使用它们。
2. ref 函数
ref 是 Vue 3 中用于创建基本类型响应式数据的一个函数。它可以将一个值包装为响应式对象，并提供一个 .value 属性来访问和更新该值。
<template>
<div>
<input v-model="count" type="number" />
<p>当前计数: {{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return {
count,
increment
};
}
}
</script>
在这个示例中，我们使用 ref(0) 创建了一个初始值为 0 的响应式变量 count。通过 v-model 指令，输入框的值直接与 count 绑定，实现双向数据绑定。
3. reactive 函数
reactive 用于将一个对象转换为响应式对象，适用于需要创建多个属性的复杂数据结构。
<template>
<div>
<h2>用户信息</h2>
<p>姓名: {{ user.name }}</p>
<p>年龄: {{ user.age }}</p>
<button @click="increaseAge">增加年龄</button>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const user = reactive({
name: '小明',
age: 20
});
const increaseAge = () => {
user.age++;
};
return {
user,
increaseAge
};
}
}
</script>
在这个例子中，user 通过 reactive 创建为响应式对象。我们可以直接修改 user.age 的值，而不需要使用像 user.age.value 这样的语法。
总结
使用 Vue 3 的组合式 API 可以大大提高代码的可读性和可维护性。通过 setup 函数、ref 和 reactive，开发者能够更加灵活地组织逻辑，促进组件之间的重用。掌握这些基础概念，能够助力开发出更优雅的 Vue 应用。随着对 Vue 3 的深入了解，你会发现组合式 API 带来的无限可能。
