Vue 3 Composition API 核心概念

Vue 3 的 Composition API 通过 ref、reactive、computed 等函数实现逻辑复用。ref 用于基本类型数据响应式包装，reactive 处理对象类型数据。setup() 是组合式逻辑的入口函数。

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

const count = ref(0);
const state = reactive({ todos: [] });
const totalTodos = computed(() => state.todos.length);

项目初始化与 CLI 配置

通过 CodeBuddy CLI 初始化项目时选择 Vue 3 模板。安装必要依赖如 @vue/cli-plugin-router 和状态管理库（可选 Pinia）。修改 vite.config.js 或 vue.config.js 配置开发服务器端口和代理。

codebuddy create vue-todo-app --template vue3
cd vue-todo-app
npm install pinia @vueuse/core

待办状态管理设计

使用 Pinia 定义 store 模块管理待办状态。定义 addTodo、toggleTodo、deleteTodo 等 actions。通过 storeToRefs 保持响应式解构。

// stores/todo.js
import { defineStore } from 'pinia';
export const useTodoStore = defineStore('todo', {
  state: () => ({ todos: [] }),
  actions: {
    addTodo(text) {
      this.todos.push({ id: Date.now(), text, done: false });
    }
  }
});

组件逻辑组织

按功能拆分组合式函数到 useTodo.js。封装数据获取、过滤逻辑到独立函数，通过 onMounted 处理初始化逻辑。使用 watch 实现本地存储持久化。

// composables/useTodo.js
import { watch } from 'vue';
export function useTodoPersist(store) {
  watch(() => store.todos, (val) => {
    localStorage.setItem('todos', JSON.stringify(val));
  }, { deep: true });
}

UI 交互实现

采用 <script setup> 语法简化组件编写。使用 v-model 绑定表单输入，通过 @submit.prevent 处理新增待办项。列表渲染使用 v-for 配合 :key。

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" />
    <button type="submit">Add</button>
  </form>
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done" />
      {{ todo.text }}
    </li>
  </ul>
</template>

测试与部署策略

使用 Vitest 编写组件单元测试，验证核心交互逻辑。配置 GitHub Actions 实现自动化构建部署。通过 defineAsyncComponent 实现路由级懒加载优化生产包体积。

// __tests__/Todo.spec.js
import { mount } from '@vue/test-utils';
test('adds new todo', async () => {
  const wrapper = mount(TodoApp);
  await wrapper.find('input').setValue('Test todo');
  await wrapper.find('form').trigger('submit');
  expect(wrapper.findAll('li')).toHaveLength(1);
});