vue组件库性能调优需平衡可维护性、通用性与运行时开销：模板优先并辅以render函数入口；响应式粒度可控，避免deep proxy；长列表内置虚拟化与v-memo；显式设计缓存与异步加载机制。
开发 Vue 组件库时，性能调优不是“越快越好”，而是要在可维护性、通用性、运行时开销之间取得平衡。组件库面向的是未知使用者和多样场景，不能像业务项目那样针对具体数据结构做深度定制。关键在于：让每个组件在各种用法下都保持合理性能，同时不牺牲开发体验与调试友好度。
模板优先，但为动态结构留出 render 函数入口
绝大多数基础组件（Button、Input、Card、Modal）应使用 template 编写。Vue 3 编译器会自动做静态提升、hoist 常量、跳过静态节点 diff —— 这些优化对组件库尤其重要，因为使用者无法控制编译过程。
- 标题、图标占位符、默认插槽 fallback 内容，天然适合 v-once 或编译期静态识别
- 避免在 template 中写复杂表达式或深层嵌套 v-if/v-for；把过滤/映射逻辑提到 computed 或 setup 中预处理
- 对明确需要运行时决定结构的组件（如 SchemaForm、DynamicTable），提供 render 函数 API 作为高级选项，但默认仍走 template 分支
响应式粒度必须可控，不默认 deep proxy
组件库接收的 props 类型不可控，若内部直接 reactive({ ...props })，极易因用户传入大型配置对象或第三方实例导致初始化卡顿、内存暴涨。
- 用 shallowRef 包裹列表类 prop（如 items: []），避免递归代理每项
- 用 shallowReactive 处理仅需监听顶层变更的对象（如 pagination、filterOptions）
- 对明确只读的配置项（theme、locale、icons），用 markRaw 包装，彻底跳过响应式系统
- 文档中明确标注哪些 prop 触发重渲染、哪些仅影响初始化，方便使用者规避陷阱
虚拟化与 memo 是长列表组件的标配
表格、选择器、树形控件等常承载大量数据，不能依赖使用者自行加虚拟滚动 —— 组件库应内置支持，并暴露合理配置项。
- 使用 useVirtualList（VueUse）或封装轻量 virtual-scroller 逻辑，支持 keeps、buffer、keyField 等参数
- 行/项模板启用 v-memo（Vue 3.2+），例如：
<tr v-memo="[row.id, row.status]"> <li>禁用 :key="index"，强制要求用户提供稳定 key 字段（如 id），并在 props 类型定义中标记为 required</li> <li>提供“静态模式”开关（如 <code>virtualize=false），方便小数据量场景关闭开销 - 高频更新区域（如搜索输入反馈、状态徽标）用 computed + 缓存策略，避免模板中直接调用函数
- 插槽内容默认惰性求值，但对命名插槽做 shallowRef 包装，防止父级响应式变化连带触发子插槽重生成
- 提供
cache-keyprop 或serverCacheKey方法（SSR 场景），让使用者可选开启组件级 SSR 缓存 - 异步加载组件（如 LazyIcon、AsyncDialog）统一用 defineAsyncComponent 封装，并内置 loading/error fallback
缓存与复用要显式设计，不依赖用户决策
组件库不能假设使用者会用 KeepAlive 或 computed 缓存，应在内部做好边界控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
