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来组织组件逻辑，从而提高开发效率和代码质量。