[教程]Vue3 Composition API：解锁组件编程新境界，实例解析让你轻松上手！

引言Vue 3 的 Com API 是一个革命性的特性，它允许开发者以一种更灵活、更模块化的方式组织组件逻辑。Com API 通过提供一系列的函数，如 setup、ref 和 reactive，让开发...

引言

Vue 3 的 Composition API 是一个革命性的特性，它允许开发者以一种更灵活、更模块化的方式组织组件逻辑。Composition API 通过提供一系列的函数，如 setup、ref 和 reactive，让开发者能够将代码组织成可重用的逻辑块，从而提高代码的可维护性和可读性。

Composition API 概述

1. setup 函数

setup 函数是 Composition API 的核心，它在组件创建之前被调用。在这个函数中，你可以定义响应式数据、计算属性、侦听器等。

import { ref } from 'vue';
export default { setup() { const count = ref(0); function increment() { count.value++; } return { count, increment }; }
};

2. 创建响应式数据

在 Vue 3 中，ref 和 reactive 是创建响应式数据的两种主要方式。

• ref 用于创建基本类型的响应式数据。
• reactive 用于创建对象的响应式数据。

import { ref, reactive } from 'vue';
const count = ref(0);
const user = reactive({ name: 'Alice', age: 25 });

3. 计算属性与侦听器

计算属性和侦听器是 Vue 中的两个重要概念，它们在 Composition API 中依然存在。

• 计算属性（computed）基于它们的依赖进行缓存，只有当依赖发生变化时才会重新计算。
• 侦听器（watch）允许你观察和响应 Vue 实例上的数据变化。

import { computed, watch } from 'vue';
const count = ref(0);
const doubledCount = computed(() => count.value * 2);
watch(count, (newValue, oldValue) => { console.log(`The count has changed from ${oldValue} to ${newValue}`);
});

实例解析

1. 简单计数器

下面是一个使用 Composition API 实现的简单计数器组件。

<template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div>
</template>
<script>
import { ref } from 'vue';
export default { setup() { const count = ref(0); function increment() { count.value++; } return { count, increment }; }
};
</script>

2. 动态表单

以下是一个动态表单的例子，它使用 reactive 来处理表单数据，并使用 watch 来响应数据变化。

<template> <div> <form @submit.prevent="submitForm"> <input v-model="formData.name" type="text" placeholder="Name" /> <input v-model="formData.age" type="number" placeholder="Age" /> <button type="submit">Submit</button> </form> <p>Name: {{ formData.name }}</p> <p>Age: {{ formData.age }}</p> </div>
</template>
<script>
import { reactive, watch } from 'vue';
export default { setup() { const formData = reactive({ name: '', age: null }); watch(formData, (newValue, oldValue) => { console.log('Form data has changed', newValue); }); function submitForm() { console.log('Form submitted with', formData); } return { formData, submitForm }; }
};
</script>

总结

Vue 3 的 Composition API 为开发者提供了一种全新的组件编程方式，它不仅简化了代码的组织，还提高了代码的可维护性和可读性。通过本文的实例解析，相信你已经对 Composition API 有了一定的了解，可以开始在你的项目中尝试使用它了。