核心业务开发

业务开发的关键是把"需求"翻译成"数据与操作"。任务系统的核心操作是添加、删除、切换完成状态，外加统计完成数量。本节先用响应式数据把这几件事做出来，验证逻辑正确后再拆分组件。

任务的数据结构

每个任务包含三个字段：

// 任务对象
{ id: 1, title: '学习 Vue3', done: false }

id 用 Date.now() 生成可保证唯一；done 表示是否完成。

添加任务

用 ref 声明任务数组，push 新任务即可，注意先校验空输入：

import { ref } from 'vue'
const tasks = ref([])
const title = ref('')
function addTask() {
  const t = title.value.trim()
  if (!t) return                 // 空内容不添加
  tasks.value.push({ id: Date.now(), title: t, done: false })
  title.value = ''               // 清空输入框
}

删除任务

删除的本质是"从数组里过滤掉指定 id"：

function removeTask(id) {
  tasks.value = tasks.value.filter(task => task.id !== id)
}

切换完成状态

找到对应任务后反转 done 字段：

function toggleTask(id) {
  const task = tasks.value.find(t => t.id === id)
  if (task) task.done = !task.done
}

用计算属性统计进度

"已完成数量"是派生数据，用 computed 计算并缓存：

import { computed } from 'vue'
const doneCount = computed(() =>
  tasks.value.filter(t => t.done).length
)

渲染模板

把数据与方法接到模板上：v-model 双向绑定输入框、v-for 循环渲染、v-bind 绑定复选框状态。

<template>
  <input v-model="title" @keyup.enter="addTask" placeholder="输入任务" />
  <button @click="addTask">添加</button>
  <ul>
    <li v-for="task in tasks" :key="task.id">
      <input type="checkbox" :checked="task.done"
             @change="toggleTask(task.id)" />
      <span :class="{ done: task.done }">{{ task.title }}</span>
      <button @click="removeTask(task.id)">删除</button>
    </li>
  </ul>
  <p>已完成 {{ doneCount }} / {{ tasks.length }} 项</p>
</template>

<style scoped>
.done { text-decoration: line-through; color: #999; } /* 已完成加删除线 */
</style>

效果：勾选后文字出现删除线、计数随之变化；点击删除按钮列表同步刷新。

小结

增删改查全部跑通，说明核心逻辑正确。但代码全堆在一个组件里不利于维护，下一节按职责拆分成多个组件。