【Vue3】有一个文本框可添加任务，需实现列表渲染，删除功能，添加功能，底部合计，和清空任务

在 Vue3 中，你可以使用组件化思想来实现这样的任务管理功能。以下是简化的步骤：

1. **创建组件**：
- 创建一个 `TaskItem.vue` 组件，用于显示单个任务，包含输入框、删除按钮和任务信息。

   <template>
     <div>
       <input v-model="taskName" placeholder="添加任务...">
       <button @click="deleteTask">删除</button>
       <span>{{ taskName }}</span>
     </div>
   </template>
   <script>
   export default {
     data() {
       return {
         taskName: '',
       };
     },
     methods: {
       deleteTask() {
         this.taskName = '';
       }
     }
   };
   </script>

2. **创建列表组件** (`TaskList.vue`) 来展示任务列表并处理增删操作：
- 使用 `v-for` 指令遍历数据数组，渲染 `TaskItem` 组件，并监听数组变化来触发视图更新。

   <template>
     <div>
       <input type="text" ref="taskInput" />
       <ul>
         <li v-for="(task, index) in tasks" :key="index">
           <TaskItem :task="task" @delete="removeTask(index)" />
         </li>
       </ul>
       <p>总计：{{ totalTasks }}</p>
       <button @click="clearTasks">清空任务</button>
     </div>
   </template>
   <script>
   import TaskItem from './TaskItem.vue';

   export default {
     components: { TaskItem },
     data() {
       return {
         tasks: [],
         totalTasks: 0,
       };
     },
     methods: {
       addTask() {
         if (this.taskInput.value.trim()) {
           this.tasks.push(this.taskInput.value);
           this.totalTasks++;
           this.taskInput.value = '';
         }
       },
       removeTask(index) {
         this.tasks.splice(index, 1);
         this.totalTasks--;
       },
       clearTasks() {
         this.tasks.length = 0;
         this.totalTasks = 0;
       },
     },
     watch: {
       tasks(newTasks) {
         // 触发视图更新
       },
     },
   };
   </script>