小聊：别把组件当成“全Neng工具箱”

说实话，咱们在 Vue3 项目里写组件，Zui怕的就是“越写越臃肿”。

哈哈，你懂的，那种一堆业务代码塞进去，后面想改dou得拔根筋的感觉。

咱先抛个砖：复用、维护、性Neng，这三者像三只小怪兽，得把它们喂饱才Neng活得舒坦。

先说 Props、Slots、Emits。别把所有功Nengdou塞进一个大 Props，分层次才是王道。

比如一个按钮组件，你Ke以用 sizetypeloading 来控制外观和状态。

插槽则负责内容，让父组件自行决定要放啥。

再说 emit，保持单向数据流，别让子组件直接改父级变量。

组合式 API 出场啦！把通用逻辑抽成 composable，像 useFetchuseCounter 那样。

这样一来无论哪个页面需要计数器，dou直接调 useCounter，省时省力。

这玩意儿在任何表单里douNeng直接挂上，用起来跟喝水一样顺滑。

先说文件组织。别把所有组件放根目录，按业务模块划分文件夹，比如 /components/common/, /components/dashboard/.

还有命名规范。文件名用 PascalCase，变量名用 camelCase，这样搜索起来才舒服。

再来聊一下 “单一职责”。每个组件只干一件事儿，例如用户卡片只负责展示信息，不去请求数据，也不去处理表单提交。

数据请求建议放在 composable 或 Pinia store 里让 UI 层专注渲染。

直接改数组索引或对象属性会导致 Vue 检测不到变化。

// 错误写法
list.value = 'new'
// 正确写法
list.value.splice

A) 异步组件 + 懒加载。大型页面Ke以把不常见的子模块Zuo成异步加载，用 #Suspense#/#defineAsyncComponent#.

B) 虚拟列表。列表渲染几千条时用 #vue-virtual-scroller#, 只渲染可视区，大幅降低 DOM 数量。

C) memo 化。对纯展示型组件，用 #memo# 包裹，只在 Props 真正变geng时才重新渲染。

import { onMounted, ref } from 'vue'
export function usePerf {
  const start = performance.now
  onMounted => {
    console.log - start}ms`)
  })
}

先从需求出发。Ru果某功Neng只在一个页面出现，那就不要急着抽离成全局组件，免得增加不必要的抽象层。

Ru果同类需求出现频率高于三次就考虑抽象为公共组件或 composable，这样才Neng真正提升复用率。

再kan维护成本：抽象后Ru果接口太复杂，会让后续开发者望而却步。保持 API 简洁，一两个必选属性，多余的交给默认值或 slot 填充。

*问题*： 我部署了一个基于 Vue3 的 SPA，却发现百度搜索根本抓不到页面内容，咋回事？

*答案*： 主要是因为搜索引擎爬虫对 JavaScript 渲染支持有限，尤其是百度，对 SPA 的首屏渲染不友好。解决办法有：

- 使用服务端渲染或静态预渲染让 HTML 内容在服务器就生成好；

- 给关键内容加上 meta 标签和结构化数据，提高可被抓取概率；

- 配置合理的 robots.txt 和 sitemap.xml，引导爬虫抓取；

- 若实在不想 SSR，也Ke以使用 prerender 插件，在构建阶段生成静态快照页。

Cascading Props hen强大，但Ru果层层传递太深，就会出现 “prop drilling”。这时候Ke以换成 provide/inject 或者 Pinia 全局状态管理来解耦。

Pina geng适合跨页面共享的数据，比如登录信息、购物车等；而 Provide/Inject geng轻量，仅用于父子多层级之间传递主题色之类的小配置。

- 用 Chrome DevTools 的 Performance 面板kankan到底是哪一步卡顿；

- 在关键计算属性前加上 console.log 打印依赖变化；

- 对于大数组遍历，用 computed 缓存结果，而不是每次渲染dou重新算；

- 把耗时函数包装成 async 并配合 await，让 UI 不被阻塞；

- 别忘了检查网络请求是否走了缓存或被拦截导致慢速返回；

- Zui后一定记得清理无用的 watch 和事件监听，否则内存泄漏也会拖慢页面！

Easter Egg：代码里的“小毛病”也Neng变宝藏？ `

// 错误写法
const list = ref
list.value = ; // Vue 无法检测
// 正确写法
list.value.splice

Ru果你发现同一段逻辑Yi经出现三次以上，而且每次dou有细微差别，那说明它Yi经“进化”为独立模块，是时候抽出来Zuo composable 或公共组件啦！哈哈~ 不对不对，我刚才说的是“三次”，其实两次也可Neng值得抽离，kan你团队对代码整洁度要求有多高啦~ 😅