如果要你用 Vue 从零搭建一个任务列表应用，你的整体设计思路和实现步骤是怎样的？
考察说明
考查候选人基于 Vue 进行完整应用设计的能力，包括组件划分、状态管理、交互逻辑和工程化实践。
回答思路
- 【回答框架 1】先明确需求边界：任务列表通常包含任务的增删改查、完成状态切换、筛选和本地持久化。我会先梳理这些核心功能，再确定技术选型：使用 Vue 3 组合式 API 提升逻辑复用性，状态管理根据复杂度选择，简单场景用 reactive 或 ref 即可，复杂场景引入 Pinia。
- 【回答框架 2】组件设计上按职责拆分：TaskList 负责渲染列表，TaskItem 负责单个任务的展示和操作，TaskForm 负责新增和编辑，FilterBar 负责筛选条件。通过 props 向下传递数据、emit 向上抛出事件，保持组件单一职责和可维护性。
- 【回答框架 3】数据流设计：任务数据统一存放在父组件或 store 中，通过计算属性实现筛选和统计，例如未完成任务数。交互逻辑如添加、删除、切换状态、编辑都通过方法集中处理，避免散落在模板中。
- 【回答框架 4】持久化方案：使用 localStorage 或 IndexedDB 保存任务数据，在应用加载时读取、数据变更时写入，注意处理序列化和异常情况。同时考虑性能优化，如使用 v-for 时绑定 key，避免不必要的渲染。
- 【回答框架 5】工程化实践：使用 Vue CLI 或 Vite 搭建项目，配置 ESLint 和 Prettier 保证代码规范，编写单元测试覆盖核心逻辑，最后进行构建部署。整个实现过程会遵循组件化、单向数据流和可测试性原则。
- 【关键点 1】组件划分遵循单一职责，通过 props 和 emit 实现通信。
- 【关键点 2】状态管理根据规模选择，简单用 ref/reactive，复杂用 Pinia。
- 【关键点 3】使用计算属性处理筛选和统计，避免模板中复杂逻辑。
- 【关键点 4】通过 localStorage 实现持久化，注意数据格式和异常处理。
- 【关键点 5】使用 key 优化列表渲染，遵循 Vue 性能最佳实践。
- 【易错点 1】避免将所有状态放在单个组件中导致难以维护，应合理拆分。
- 【易错点 2】不要直接修改 props，应通过事件通知父组件更新数据。
- 【易错点 3】持久化时注意 JSON 序列化可能丢失函数或特殊类型，需处理边界情况。