f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
83 lines
2.7 KiB
Markdown
83 lines
2.7 KiB
Markdown
---
|
|
title: Prefer ref() Over reactive() for Consistency
|
|
impact: MEDIUM
|
|
impactDescription: Using ref() as default avoids reactive() gotchas and provides consistent patterns
|
|
type: efficiency
|
|
tags: [vue3, reactivity, ref, reactive, composition-api, best-practice]
|
|
---
|
|
|
|
# Prefer ref() Over reactive() for Consistency
|
|
|
|
**Impact: MEDIUM** - The Vue documentation recommends using `ref()` as the primary API for declaring reactive state. This avoids several `reactive()` gotchas and provides a consistent pattern across your codebase.
|
|
|
|
While both `ref()` and `reactive()` create reactive state, `reactive()` has several limitations: it only works with objects (not primitives), cannot be reassigned, and loses reactivity when destructured. Using `ref()` consistently means one pattern to remember.
|
|
|
|
## Task Checklist
|
|
|
|
- [ ] Use `ref()` as the default for all reactive state
|
|
- [ ] Only use `reactive()` when you have a specific reason (e.g., group of related state)
|
|
- [ ] Be consistent within a codebase - pick one approach and stick with it
|
|
- [ ] Remember: `.value` is the price for avoiding `reactive()` gotchas
|
|
|
|
**Incorrect:**
|
|
```javascript
|
|
import { reactive } from 'vue'
|
|
|
|
// reactive() has multiple gotchas:
|
|
|
|
// 1. Cannot use with primitives
|
|
const count = reactive(0) // Won't work - not reactive
|
|
|
|
// 2. Cannot reassign the entire object
|
|
let state = reactive({ items: [] })
|
|
state = reactive({ items: [1, 2, 3] }) // Loses reactivity!
|
|
|
|
// 3. Destructuring breaks reactivity
|
|
const { items } = state // items is not reactive
|
|
|
|
// 4. Passing to functions can lose reactivity
|
|
someFunction(state.items) // May lose reactivity depending on usage
|
|
```
|
|
|
|
**Correct:**
|
|
```javascript
|
|
import { ref } from 'vue'
|
|
|
|
// ref() works universally:
|
|
|
|
// 1. Works with primitives
|
|
const count = ref(0)
|
|
count.value++ // Works!
|
|
|
|
// 2. Can reassign the entire object
|
|
const state = ref({ items: [] })
|
|
state.value = { items: [1, 2, 3] } // Reactivity preserved!
|
|
|
|
// 3. No destructuring issues (you work with .value)
|
|
const items = state.value.items // If you need just the value
|
|
|
|
// 4. Passing refs is explicit
|
|
someFunction(state) // Pass the ref
|
|
someFunction(state.value) // Or pass the value explicitly
|
|
```
|
|
|
|
```javascript
|
|
// When reactive() makes sense: grouping related state
|
|
import { reactive, toRefs } from 'vue'
|
|
|
|
// Acceptable use case: form state with many related fields
|
|
const form = reactive({
|
|
username: '',
|
|
email: '',
|
|
password: '',
|
|
confirmPassword: ''
|
|
})
|
|
|
|
// But always use toRefs() if you need to destructure
|
|
const { username, email } = toRefs(form)
|
|
```
|
|
|
|
## Reference
|
|
- [Vue.js Reactivity Fundamentals](https://vuejs.org/guide/essentials/reactivity-fundamentals.html)
|
|
- [Vue.js Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html)
|