[教程]揭秘Vue3 Composition API：入门技巧与实战案例解析

1. 引言Vue3的Com API是Vue.js框架的一个重要特性，它提供了一种新的组织组件逻辑的方式，旨在解决Options API在复杂组件中逻辑分散的问题。Com API通过setup函数将相关...

1. 引言

Vue3的Composition API是Vue.js框架的一个重要特性，它提供了一种新的组织组件逻辑的方式，旨在解决Options API在复杂组件中逻辑分散的问题。Composition API通过setup函数将相关逻辑集中管理，提高了代码的可读性和可维护性。本文将带你深入了解Composition API的入门技巧，并通过实战案例解析其应用。

2. Composition API核心概念

2.1 setup函数

setup函数是Composition API的入口点，它在组件实例创建之前被调用。setup函数接收两个参数：props和context。props是传递给组件的属性，context包含了一些与组件相关的方法和属性，如emit、slots、attrs等。

setup(props, { emit, slots, attrs }) { // ...
}

2.2 响应式数据

Composition API提供了ref和reactive函数来创建响应式数据。

• ref：用于创建单个值的响应式对象。
• reactive：用于创建对象类型的响应式对象。

import { ref, reactive } from 'vue';
setup() { const count = ref(0); const person = reactive({ name: 'John', age: 30 }); // ...
}

2.3 计算属性和侦听器

• computed：用于创建计算属性。
• watch：用于创建侦听器。

import { computed, watch } from 'vue';
setup() { const count = ref(0); const doubledCount = computed(() => count.value * 2); watch(count, (newVal, oldVal) => { // ... }); // ...
}

2.4 生命周期钩子

Composition API提供了生命周期钩子函数，如onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted等。

import { onBeforeMount, onMounted } from 'vue';
setup() { onBeforeMount(() => { // ... }); onMounted(() => { // ... }); // ...
}

3. 实战案例：构建TodoList应用

下面我们通过一个TodoList应用的实战案例，展示如何使用Composition API来构建组件。

3.1 创建TodoItem.vue组件

<template> <div> <input type="checkbox" v-model="todo.completed" /> <span>{{ todo.text }}</span> <button @click="emit('remove', todo.id)">Remove</button> </div>
</template>
<script>
import { ref } from 'vue';
export default { props: ['todo'], emits: ['remove'], setup(props, { emit }) { const todo = ref(props.todo); function removeTodo() { emit('remove', todo.value.id); } return { todo, removeTodo }; }
};
</script>

3.2 创建useTodos可复用逻辑

import { ref } from 'vue';
export function useTodos() { const todos = ref([]); function addTodo(text) { todos.value.push({ text, completed: false }); } function removeTodo(id) { todos.value = todos.value.filter(todo => todo.id !== id); } return { todos, addTodo, removeTodo };
}

3.3 在组件中使用useTodos

<template> <div> <input v-model="newTodoText" @keyup.enter="addTodo" /> <ul> <todo-item v-for="todo in todos" :key="todo.id" :todo="todo" @remove="removeTodo" /> </ul> </div>
</template>
<script>
import { useTodos } from './useTodos';
import TodoItem from './TodoItem.vue';
export default { components: { TodoItem }, setup() { const { todos, addTodo, removeTodo } = useTodos(); const newTodoText = ref(''); return { todos, addTodo, removeTodo, newTodoText }; }
};
</script>

4. 总结

Composition API是Vue3的一个强大特性，它通过setup函数将组件逻辑集中管理，提高了代码的可读性和可维护性。通过本文的入门技巧和实战案例解析，相信你已经对Composition API有了更深入的了解。在实际项目中，你可以尝试使用Composition API来组织组件逻辑，从而提高开发效率和代码质量。