优化Vue组件复用性能需减少冗余渲染、避免重复实例化、提升逻辑复用效率；优先用keep-alive缓存稳定组件，组合式函数抽离通用逻辑，作用域插槽解耦渲染，异步组件降低首屏压力。
优化 Vue 组件复用性能，核心在于减少冗余渲染、避免重复实例化、提升逻辑复用效率，而不是单纯“多写几个组件”。关键不在数量，而在复用方式是否轻量、可控、可缓存。
合理使用 keep-alive 缓存状态
对频繁切换但内容稳定、数据变化不频繁的组件（如 Tab 页、表单向导步骤），用 <keep-alive> 包裹可跳过销毁与重建过程，保留组件实例和内部响应式状态。
- 配合
include或exclude精确控制缓存范围，避免缓存无关组件 - 利用
max限制缓存数量，防止内存持续增长 - 监听
activated/deactivated钩子，在组件激活时按需刷新异步数据（而非每次mounted）
优先采用组合式函数（Composable）替代 HOC 或 Mixin
Vue 3 的 setup + 组合式函数是当前最推荐的复用逻辑方式。它比高阶组件（HOC）更轻量，比 Mixin 更清晰、无命名冲突、类型推导友好。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 把通用逻辑（如表单校验、滚动监听、权限判断）抽成独立的
useXXX()函数 - 函数内部只调用
ref、computed、watch等响应式 API，不依赖组件实例 - 多个组件可同时调用同一函数，各自维护独立状态，互不影响
善用作用域插槽（Scoped Slots）解耦渲染逻辑
当子组件需要由父组件决定“怎么展示”而非“展示什么”，作用域插槽比 props 透传模板更安全、更灵活，也避免了因 props 过多导致的组件过度配置。
立即学习“前端免费学习笔记（深入）”；
- 在列表类组件中，用
<slot name="item" :item="item"></slot>让父组件自定义每项结构 - 搭配
v-bind="$props"和插槽透传，实现“包装即复用”，例如封装一个带加载/错误状态的AsyncList - 避免滥用
v-html或动态render，保持插槽内容仍受 Vue 响应式系统管理
按需加载 + 异步组件降低首屏压力
不是所有组件都需要在首屏加载。对非关键路径、大体积或低频使用的组件（如富文本编辑器、图表配置面板），应延迟加载。
- 用
defineAsyncComponent包装组件，支持 loading / error 状态处理 - 路由级异步：在
router.ts中直接使用() => import('./views/Report.vue') - 结合
<Suspense>统一管理加载占位符，避免局部骨架屏重复编写
