全书目录

第三篇：Vue 完全指南 —— 新城区商业街宇宙

第十八章：怎么判断一个 Vue 项目有没有写顺

1 分钟 196 字 第 88 / 962 个阅读单元

一个成熟的 Vue 项目，通常会长成这样：

text
Vue 商业街应用
│
├── 组件层
│   ├── SFC
│   ├── props / emits / slots / v-model
│   └── Transition / Teleport / KeepAlive
│
├── 响应式层
│   ├── ref / reactive
│   ├── computed
│   ├── watch / watchEffect
│   └── composables
│
├── 应用层
│   ├── Vue Router
│   ├── Pinia
│   └── Vite / create-vue
│
└── 上层框架
    └── Nuxt 4.x

Vue 项目最稳的分层口诀：

  • 页面长什么样：组件
  • 某个组件自己记的状态：ref / reactive
  • 能算出来的：computed
  • 状态变化后的副作用：watch / watchEffect
  • 多组件复用逻辑：composable
  • 多页面共享状态：Pinia
  • URL 驱动的页面切换：Vue Router
  • 需要 SSR / API / 全栈：Nuxt