1、将列表和列表项组件化，使用filter来声明式的定义待办清单和完成清单 2、将输入框组件化，通过事件将数据提交给父组件，实现追加代办项到待办清单中。 3、可以考虑使用element-plus组件库来美化应用。 现在有App.vue 根据上述要求完成修改现在的代码

首先，我们将逐一介绍如何按照您的要求对 `App.vue` 进行重构：

1. 将列表和列表项组件化，使用 `v-for` 和自定义组件 (`todo-item`) 实现待办清单和已完成清单。我们可以创建一个新的名为 `TodoList` 的组件，包含一个数组状态（如 todos 和 completedTodos），以及一个过滤功能（例如 filterFn）:

<template>
  <div>
    <h2>待办事项</h2>
    <TodoList :todos="todos" :completedTodos="completedTodos" @addTodo="addTodo" @toggleDone="toggleDone" :filterFn="filterFn"></TodoList>

    <h2>已完成事项</h2>
    <TodoList :todos="completedTodos" :completedTodos="todos" @toggleDone="toggleDone" :filterFn="invertFilterFn" />
  </div>
</template>

<script>
import TodoItem from '@/components/TodoItem.vue';

export default {
  components: {
    TodoItem,
  },
  data() {
    return {
      todos: [],
      completedTodos: [],
      filterFn: (item) => !item.done, // 默认只显示未完成
    };
  },
  methods: {
    addTodo(item) {
      this.todos.push(item);
    },
    toggleDone(todo) {
      todo.done = !todo.done;
      if (todo.done) {
        this.completedTodos.push(todo);
        this.todos.splice(this.todos.indexOf(todo), 1);
      } else {
        this.completedTodos.splice(this.completedTodos.indexOf(todo), 1);
        this.todos.push(todo);
      }
    },
    invertFilterFn(item) {
      return item.done; // 当切换到已完成时，反转过滤逻辑
    },
  },
};
</script>

在 `TodoList` 组件中，我们会用到 `v-for` 来渲染待办项，同时接受 `filterFn` 作为 prop 并动态显示过滤后的列表。

2. 对于输入框组件，可以创建一个名为 `TodoInput` 的组件，监听用户输入并触发添加事件：

<!-- TodoInput.vue -->
<template>
  <input v-model="text" @keyup.enter="onEnter" />
  <button @click="submit">添加</button>
</template>

<script>
export default {
  emits: ['addTodo'],
  data() {
    return {
      text: '',
    };
  },
  methods: {
    onEnter() {
      this.submit();
    },
    submit() {
      this.addTodo({ content: this.text });
      this.text = '';
    },
  },
};
</script>

然后在 App.vue 中引用这个组件并传入方法：

// App.vue - 添加TodoInput
<template>
  ...
  <TodoInput @addTodo="addTodo" />
</template>

3. 使用 Element Plus 库，替换 Vue 自带的 `<input>` 和 `<button>` 标签，以及其他可能的 UI 元素：

<!-- 引入 Element Plus -->
<template>
  <el-input v-model="text" placeholder="请输入事项..." />
  <el-button type="primary" @click="submit">添加</el-button>
</template>

现在，`App.vue` 已经按照要求进行了重构。注意在实际项目中，您还需要为每个组件创建对应的 `.vue` 文件，并确保它们正确地导入到主文件中。