Vue3组合式API实战：从零构建待办应用

Vue3组合式API实战：从零构建一个待办事项应用

引言

Vue 3的推出标志着前端开发进入了新的阶段，其中组合式API（Composition API）作为核心特性之一，为开发者提供了更灵活、更强大的代码组织方式。与传统的选项式API相比，组合式API基于函数的编程范式，能够更好地处理逻辑复用和复杂组件的状态管理。本文将通过从零构建一个待办事项（Todo List）应用的实战过程，深入探讨Vue 3组合式API的设计理念、核心概念及最佳实践。

1. 项目初始化与基础设置

在开始构建待办事项应用之前，首先需要搭建项目环境。Vue CLI或Vite均可作为项目初始化工具，这里推荐使用Vite，它提供了更快的开发体验和现代化的构建流程。

• 使用Vite创建Vue 3项目：执行`npm create vite@latest todo-app — –template vue`
• 安装依赖：`npm install`
• 启动开发服务器：`npm run dev`

项目初始化完成后，我们需要规划组件结构。一个典型的待办事项应用包含以下核心组件：

• TodoList：展示所有待办事项
• TodoItem：单个待办事项项
• TodoInput：新增待办事项的输入框

2. 使用组合式API管理状态

在Vue 3中，组合式API的核心是`setup`函数，它替代了选项式API中的`data`、`computed`、`methods`等选项。`setup`函数在组件创建之前执行，返回的对象中的属性和方法可以在模板中使用。

2.1 定义响应式状态

使用`ref`和`reactive`函数可以定义响应式状态。`ref`用于基本类型数据，而`reactive`用于对象或数组。以下是在`TodoInput`组件中管理输入状态的方式：

“`javascript
import { ref } from \’vue\’

export default {
setup() {
const inputValue = ref(\’\’)

const handleInput = (e) => {
inputValue.value = e.target.value
}

const handleSubmit = () => {
if (inputValue.value.trim()) {
// 触发添加待办事项的事件
inputValue.value = \’\’
}
}

return {
inputValue,
handleInput,
handleSubmit
}
}
}
“`

2.2 实现待办事项的增删改查

在`TodoList`组件中，我们需要管理待办事项列表的状态。使用`reactive`来存储待办事项数组，并提供添加、删除、修改状态的方法：

“`javascript
import { reactive } from \’vue\’

export default {
setup() {
const todos = reactive([
{ id: 1, text: \’学习Vue 3\’, completed: false },
{ id: 2, text: \’构建Todo应用\’, completed: false }
])

const addTodo = (text) => {
todos.push({
id: Date.now(),
text,
completed: false
})
}

const toggleTodo = (id) => {
const todo = todos.find(t => t.id === id)
if (todo) {
todo.completed = !todo.completed
}
}

const deleteTodo = (id) => {
const index = todos.findIndex(t => t.id === id)
if (index !== -1) {
todos.splice(index, 1)
}
}

return {
todos,
addTodo,
toggleTodo,
deleteTodo
}
}
}
“`

3. 计算属性与侦听器的使用

3.1 计算待办事项统计信息

组合式API中，`computed`函数用于定义计算属性。我们可以用它来统计未完成的待办事项数量：

“`javascript
import { computed } from \’vue\’

export default {
setup() {
const todos = reactive([…])

const activeCount = computed(() => {
return todos.filter(todo => !todo.completed).length
})

return {
todos,
activeCount
}
}
}
“`

3.2 侦听待办事项变化

使用`watch`函数可以侦听响应式数据的变化。例如，我们希望在待办事项列表变化时将其保存到本地存储：

“`javascript
import { watch } from \’vue\’

export default {
setup() {
const todos = reactive([…])

watch(
() => […todos],
(newTodos) => {
localStorage.setItem(\’todos\’, JSON.stringify(newTodos))
},
{ deep: true }
)

return {
todos
}
}
}
“`

4. 自定义组合式函数实现逻辑复用

组合式API的强大之处在于可以轻松提取和复用逻辑。通过自定义组合式函数，我们可以将待办事项的相关逻辑封装起来，提高代码的可维护性。

4.1 创建useTodo组合式函数

将待办事项的状态管理逻辑封装到`useTodo.js`中：

“`javascript
import { reactive, computed, watch } from \’vue\’

export function useTodo() {
const todos = reactive([])

const activeCount = computed(() => {
return todos.filter(todo => !todo.completed).length
})

const addTodo = (text) => {
todos.push({
id: Date.now(),
text,
completed: false
})
}

const toggleTodo = (id) => {
const todo = todos.find(t => t.id === id)
if (todo) {
todo.completed = !todo.completed
}
}

const deleteTodo = (id) => {
const index = todos.findIndex(t => t.id === id)
if (index !== -1) {
todos.splice(index, 1)
}
}

watch(
() => […todos],
(newTodos) => {
localStorage.setItem(\’todos\’, JSON.stringify(newTodos))
},
{ deep: true }
)

return {
todos,
activeCount,
addTodo,
toggleTodo,
deleteTodo
}
}
“`

4.2 在组件中使用自定义组合式函数

在`TodoList`组件中，直接调用`useTodo`函数即可复用逻辑：

“`javascript
import { useTodo } from \’./useTodo\’

export default {
setup() {
const { todos, activeCount, toggleTodo, deleteTodo } = useTodo()

return {
todos,
activeCount,
toggleTodo,
deleteTodo
}
}
}
“`

5. 总结

通过构建待办事项应用，我们深入实践了Vue 3组合式API的核心功能。从响应式状态的定义到计算属性和侦听器的使用，再到自定义组合式函数的实现，组合式API为开发者提供了更加灵活和可维护的代码组织方式。与传统选项式API相比，组合式API在处理复杂逻辑和逻辑复用方面具有明显优势，特别适合中大型项目的开发。

在实际开发中，建议遵循以下最佳实践：

• 将相关逻辑封装到自定义组合式函数中，提高代码复用性
• 合理使用`ref`和`reactive`，避免过度嵌套的响应式对象
• 利用计算属性来派生状态，避免模板中的复杂逻辑
• 通过侦听器处理副作用，如API调用或本地存储操作

随着Vue 3生态的不断完善，组合式API将成为前端开发的主流范式。掌握组合式API的使用技巧，将有助于开发者构建更加高效、可维护的现代Web应用。