vue-best-practices
Vue 3 best practices, common gotchas, and performance optimization.
Reactivity
- Accessing ref() values without .value in scripts → See ref-value-access
- Destructuring reactive() objects, losing reactivity → See reactive-destructuring
- Choosing between ref() and reactive() for state → See prefer-ref-over-reactive
- Accessing refs inside arrays and collections → See refs-in-collections-need-value
- Large objects or external library data overhead → See shallow-ref-for-performance
- Using nested refs in template expressions → See template-ref-unwrapping-top-level
- Comparing reactive objects with === operator → See reactivity-proxy-identity-hazard
- Library instances breaking in reactive state → See reactivity-markraw-for-non-reactive
- Expecting watchers to fire for each state change → See reactivity-same-tick-batching
- Integrating external state management libraries → See reactivity-external-state-integration
- Deriving state with watchEffect instead of computed → See reactivity-computed-over-watcheffect-mutations
Computed
- Computed getter is making API calls or mutations → See computed-no-side-effects
- Mutating computed values causes lost changes unexpectedly → See computed-return-value-readonly
- Computed property doesn't update when expected → See computed-conditional-dependencies
More from sonvee/ai-skills
my-coding-style
编码时必须严格遵循我的编码风格,编码时应优先使用该技能,在写文档时不使用该技能
10fullstack-init
初始化前后端分离全栈项目的脚手架和配置,并在日常开发中遵守用户固定的技术栈选型。当用户提到"初始化项目"、"新建全栈项目"、"搭建前后端分离项目"、"创建一个新项目"、"帮我建个项目"等意图时,主动触发此 skill。即使用户没有明确说"全栈",只要上下文涉及同时需要前端和后端的新项目,也应触发。日常讨论技术方案、写代码时也应遵守本 skill 中的技术栈约定。
8vue
Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.
8vueuse-functions
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
7vite
Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.
7vitest
Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.
7