用途:这是一套 Vue.js 性能优化指南,用于在编写、审查或重构 Vue 应用时提供规则参考,并支持自动化重构与代码生成。资料称其已对照 Vue 3.5+ 官方文档核验。
适用时机:编写新 Vue 组件、实现响应式状态与计算属性、审查性能问题、重构既有 Vue 代码、优化渲染与重渲染,以及使用 Composition API 或 Options API 时。
规则分类(按优先级):1. 响应式基础(CRITICAL,前缀 reactivity-):优先用 ref()、避免解构 reactive 对象、需要解构时用 toRefs()/getter、大数据用 shallowRef()、toRaw() 仅作有限逃生口。2. 组件性能(CRITICAL,前缀 component-):重组件用 defineAsyncComponent、用 KeepAlive 缓存状态、1000+ 项列表用 v-memo、静态内容用 v-once、无状态组件保持简单。3. 计算属性与侦听器(HIGH,前缀 computed-/watch-):派生值用 computed() 而非方法、理解按属性细粒度依赖追踪、避免对大对象使用深度侦听。4. 模板优化(MEDIUM-HIGH,前缀 template-):频繁切换用 v-show、罕见切换用 v-if;v-for 始终使用唯一原始值 key;不要在同一元素上同时用 v-if 与 v-for。5. Composition API 模式(MEDIUM,前缀 composable-):一个 composable 只负责一件事;返回 ref 而非 reactive 对象。
使用方式:可阅读各规则文件获取详细说明与代码示例,如 rules/reactivity-ref-vs-reactive.md、rules/component-v-memo.md、rules/_sections.md;每个规则文件包含原因说明、错误示例、正确示例及补充参考。完整合辑见 AGENTS.md。
限制:资料未提供安装命令、平台支持、收费方式或具体效果数据。