mcpField
V
vue-best-practices

vue-best-practices

github.com/vinayakkulkarni开发43191 次安装15 周前更新
代码仓库

关于 vue-best-practices

面向 Vue 开发者的性能指南，适用于代码审查、重构和生成。18 条按优先级排列的规则涵盖响应式、组件、计算属性、模板和 Composition API。

主要功能

  1. 0118 条优先级性能规则
  2. 02响应式 API 使用建议
  3. 03组件渲染优化
  4. 04计算属性与侦听器实践
  5. 05模板优化
  6. 06Composition API 模式

适用场景

  1. 01审查 Vue 代码的性能问题
  2. 02重构响应式状态处理
  3. 03优化大型列表渲染

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/vinayakkulkarni/vue-nuxt-best-practices --skill vue-best-practices

安装后在 Claude Code 中输入/vue-best-practices确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

AGENTS.md
metadata.json
package.json
rules/
_sections.md
_template.md
component-async.md
component-functional.md
component-keep-alive.md
component-v-memo.md
component-v-once.md
composable-return-refs.md
composable-single-responsibility.md
computed-cache.md
computed-dependencies.md
reactivity-avoid-destructure.md
reactivity-raw-values.md
reactivity-ref-vs-reactive.md
reactivity-shallowRef.md
reactivity-toRefs.md
template-avoid-v-if-v-for.md
template-key-attribute.md
template-v-show-vs-if.md
watch-deep-avoid.md
scripts/
build.ts
validate.ts

详细介绍

Vue 最佳实践

Vue.js 应用的全面性能优化指南（已根据官方 Vue 3.5+ 文档验证）。包含 5 个类别中的 18 条规则，并按影响程度排序，以指导自动重构和代码生成。

适用场景

在以下情形中参考这些指南：

  • 编写新的 Vue 组件
  • 实现响应式状态和计算属性
  • 检查代码中的性能问题
  • 重构现有 Vue 代码
  • 优化渲染和重新渲染
  • 使用 Composition API 或 Options API

按优先级划分的规则类别

优先级类别影响前缀
1响应式基础知识CRITICALreactivity-
2组件性能CRITICALcomponent-
3计算属性与侦听器HIGHcomputed- / watch-
4模板优化MEDIUM-HIGHtemplate-
5Composition API 模式MEDIUMcomposable-

快速参考

1. 响应式基础知识（CRITICAL）
  • reactivity-ref-vs-reactive - 优先使用 ref() 作为主要的响应式 API
  • reactivity-avoid-destructure - 不要解构响应式对象
  • reactivity-toRefs - 需要解构时使用 toRefs()/getter
  • reactivity-shallowRef - 对大型非响应式数据使用 shallowRef()
  • reactivity-raw-values - 将 toRaw() 视为有限的特殊用途接口
2. 组件性能（CRITICAL）
  • component-async - 对大型组件使用 defineAsyncComponent
  • component-keep-alive - 使用 KeepAlive 缓存组件状态
  • component-v-memo - 对包含 1000+ 项的列表使用 v-memo 微优化
  • component-v-once - 对静态内容使用 v-once
  • component-functional - 保持无状态组件简单
3. 计算属性与侦听器（HIGH）
  • computed-cache - 对派生值使用 computed()，而非方法
  • computed-dependencies - 了解细粒度的逐属性依赖跟踪
  • watch-deep-avoid - 避免对大型对象使用深度侦听器
4. 模板优化（MEDIUM-HIGH）
  • template-v-show-vs-if - 频繁切换时使用 v-show，很少切换时使用 v-if
  • template-key-attribute - 在 v-for 中始终使用唯一的基本类型 key
  • template-avoid-v-if-v-for - 切勿在同一元素上同时使用 v-if 和 v-for
5. Composition API 模式（MEDIUM）
  • composable-single-responsibility - 每个组合式函数只处理一个关注点
  • composable-return-refs - 返回 refs，而非响应式对象

使用方法

阅读各条规则的文件，了解详细说明和代码示例：

rules/reactivity-ref-vs-reactive.md
rules/component-v-memo.md
rules/_sections.md

每个规则文件都包含：

  • 简要说明其重要性
  • 错误代码示例及说明
  • 正确代码示例及说明
  • 补充背景信息和参考资料

完整汇编文档

如需查看包含所有规则详细说明的完整指南：AGENTS.md

评论

支持 Markdown