Vue3 Composition API实战：构建响应式任务管理器

Vue3 Composition API实战：构建响应式任务管理器 | Vue3开发指南

引言：为什么选择Composition API？

Vue3带来的Composition API彻底改变了我们组织Vue组件逻辑的方式。相比Options API，它提供了更灵活的逻辑组织和复用能力，特别是在处理复杂组件时。

在本教程中，我们将通过构建一个功能完整的任务管理器应用，深入探索Composition API的核心特性：

响应式状态管理（ref, reactive）
计算属性（computed）
方法（methods）
生命周期钩子（onMounted）
组件逻辑复用（composables）

项目初始化

首先创建一个新的Vue3项目：

npm create vue@latest
cd vue-task-manager
npm install
npm run dev

我们将使用Composition API的setup语法糖，它使代码更简洁：

<script setup>
// 这里编写Composition API代码
</script>

核心概念：响应式状态管理

Vue3提供了两种创建响应式数据的主要方法：

1. ref()

用于基本类型值（字符串、数字、布尔值）

import { ref } from 'vue'

const taskTitle = ref('')
const taskCount = ref(0)

2. reactive()

用于对象类型数据，保持对象内部属性的响应性

import { reactive } from 'vue'

const task = reactive({
  id: 1,
  title: '学习Vue3',
  completed: false
})

任务管理器实战开发

下面是我们将要构建的任务管理器的核心功能：

添加新任务

任务列表

{{ task.title }}
暂无任务，请添加新任务！

总任务: {{ totalTasks }} | 剩余: {{ activeTasksCount }} | 已完成: {{ completedTasksCount }}

代码解析：Composition API实现

1. 响应式状态定义

import { ref, reactive, computed, onMounted } from 'vue'

// 任务列表
const tasks = ref([])

// 新任务输入
const newTask = ref('')

// 过滤条件
const filter = ref('all')

// 模拟从API加载初始数据
onMounted(() => {
  tasks.value = [
    { id: 1, title: '学习Vue3基础', completed: true },
    { id: 2, title: '掌握Composition API', completed: false },
    { id: 3, title: '构建实际项目', completed: false }
  ]
})

2. 计算属性

// 计算过滤后的任务
const filteredTasks = computed(() => {
  switch (filter.value) {
    case 'active': 
      return tasks.value.filter(task => !task.completed)
    case 'completed': 
      return tasks.value.filter(task => task.completed)
    default: 
      return tasks.value
  }
})

// 任务统计
const totalTasks = computed(() => tasks.value.length)
const completedTasksCount = computed(() => 
  tasks.value.filter(t => t.completed).length
)
const activeTasksCount = computed(() => 
  totalTasks.value - completedTasksCount.value
)

3. 操作方法

// 添加新任务
function addTask() {
  if (newTask.value.trim() === '') return
  
  tasks.value.push({
    id: Date.now(),
    title: newTask.value.trim(),
    completed: false
  })
  
  newTask.value = ''
}

// 删除任务
function removeTask(id) {
  tasks.value = tasks.value.filter(task => task.id !== id)
}

最佳实践：逻辑复用

Composition API的核心优势之一是逻辑复用。我们可以将任务管理逻辑提取到可组合函数中：

// useTaskManager.js
import { ref, computed } from 'vue'

export default function useTaskManager(initialTasks = []) {
  const tasks = ref(initialTasks)
  const filter = ref('all')
  
  const filteredTasks = computed(() => {
    // 过滤逻辑
  })
  
  const taskStats = computed(() => {
    // 统计逻辑
  })
  
  function addTask(title) {
    // 添加任务
  }
  
  function removeTask(id) {
    // 删除任务
  }
  
  return {
    tasks,
    filter,
    filteredTasks,
    taskStats,
    addTask,
    removeTask
  }
}

在组件中使用：

<script setup>
import useTaskManager from '@/composables/useTaskManager'

const { 
  tasks, 
  filter, 
  filteredTasks, 
  taskStats,
  addTask,
  removeTask 
} = useTaskManager()
</script>

这种模式使我们的组件逻辑更清晰，同时实现了业务逻辑的复用。