Vue3框架使用组件搭建TodoList应用 1、将列表和列表项组件化，使用filter来声明式的定义待办清单和完成清单 2、将输入框组件化，通过事件将数据提交给父组件，实现追加代办项到待办清单中。 3、可以考虑使用element-plus组件库来美化应用。

Vue3框架中的TodoList应用通常会采用模块化的思路，通过组件来构建复杂的功能。首先，你可以创建三个核心组件：

1. **TodoItem.vue** - 这是一个列表项组件，它包含状态（如是否已完成）以及显示信息的方法。当状态改变时，可通过`v-model`指令与父组件的数据保持同步。

<template>
  <li :class="{ completed: item.completed }">
    {{ item.text }}
    <button @click="toggleCompleted">已完成</button>
  </li>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    toggleCompleted() {
      this.$emit('toggle', this.item);
    }
  }
}
</script>

2. **TodoList.vue** - 主要负责展示所有待办事项，并提供过滤功能。这里可以使用`v-for`循环遍历数组，同时接收并处理来自子组件的事件。

<template>
  <div>
    <input v-model="newTask" placeholder="添加新任务" />
    <button @click="addNewTask">添加</button>
    <ul>
      <todo-item v-for="(task, index) in filteredTasks" :key="index" :item="task" @toggle="toggleTask(index)" />
    </ul>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue';
export default {
  components: { TodoItem },
  data() {
    return {
      newTask: '',
      tasks: [],
      filteredTasks: []
    };
  },
  methods: {
    addNewTask() {
      if (this.newTask.trim()) {
        this.tasks.push({ text: this.newTask, completed: false });
        this.newTask = '';
      }
    },
    toggleTask(index) {
      this.filteredTasks[index].completed = !this.filteredTasks[index].completed;
    },
    filterTasks(filterType) {
      this.filteredTasks = this.tasks.filter(task => task.completed === filterType);
    }
  },
  watch: {
    tasks(newTodos) {
      this.filteredTasks = newTodos;
    }
  }
};
</script>

3. **App.vue** 或者 main.js - 安装element-plus并引入，然后作为全局样式导入，最后实例化TodoList组件。

<!-- App.vue or main.js -->
<template>
  <div id="app">
    <el-container>
      <el-header>Todo List</el-header>
      <el-main>
        <todo-list></todo-list>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue';
import ElementPlus from 'element-plus';
Vue.use(ElementPlus);

export default {
  components: { TodoList }
};
</script>