Vue.js 开发指南

任务清单

• 遵循核心原则
• 除非有充分理由，否则遵循默认设置
• 遵循响应式最佳实践
• 遵循组件最佳实践
  • 遵循 Vue SFC 最佳实践
  • 保持组件专注
    • 需要时将大组件拆分为小组件
    • 如果适用，将状态/副作用移入组合式函数
  • 遵循数据流最佳实践

---

核心原则

• 保持状态可预测： 单一事实来源，派生其他所有内容。
• 使数据流显式： 大多数情况下，Props 向下，Events 向上。
• 倾向于小型、专注的组件： 更易于测试、复用和维护。
• 避免不必要的重新渲染： 明智地使用计算属性和侦听器。
• 可读性至关重要： 编写清晰、自文档化的代码。

默认设置（除非用户另有说明）

• 优先使用 组合式 API 而非选项式 API。

响应式

重要：在创建、更新组件或组合式函数时，必须遵循 references/reactivity-guide.md 进行响应式状态管理。

组件

重要：在使用 Vue SFC 时，必须遵循 references/sfc-guide.md 中的最佳实践。

• 默认优先使用 <script setup lang="ts"> (TypeScript) 的 Vue 单文件组件 (SFC)。
• 在 Vue SFC 中，保持各部分顺序为：<script> → <template> → <style>。

保持组件专注

当一个组件具有 超过一个明确的职责（例如数据编排 + UI，或多个独立的 UI 部分）时，对其进行拆分。

• 优先选择 较小的组件 + 组合式函数 而非一个“巨型组件”
• 将 UI 部分 移入子组件（props 输入，events 输出）。
• 将 状态/副作用 移入组合式函数 (useXxx())。

注意：此规则默认也适用于 Vue / Nuxt 项目中的入口组件（例如 App.vue）。

数据流

重要：在使用以下方式在组件之间传递和接收数据时，必须遵循 references/data-flow-guide.md：

• Props
• Emits
• v-model
• provide/inject

对于跨应用共享数据，请遵循 references/state-management-guide.md 并考虑使用 Store 作为状态管理解决方案。