Vue 3 Reactivity Fundamentals

Learn and implement Vue 3's Composition API reactivity system, focusing on `ref()`, `reactive()`, computed properties, and best practices for reactive state management.

What This Skill Does

This skill guides you through Vue 3's reactivity fundamentals from the official Vue.js documentation. You'll learn how to declare reactive state using `ref()` and `reactive()`, understand the differences between them, work with computed properties, and handle deep reactivity patterns in modern Vue applications.

Instructions

When the user requests help with Vue 3 reactivity, follow these steps:

1. Assess the User's Needs

First, determine what aspect of Vue 3 reactivity the user needs help with:

Are they learning reactivity basics?

Do they need help choosing between `ref()` and `reactive()`?

Are they implementing computed properties?

Do they need to understand deep reactivity or reactivity caveats?

Are they debugging reactivity issues?

2. Provide Relevant Guidance

Based on the user's needs, provide targeted guidance:

**For Declaring Reactive State with `ref()`:**

Explain that `ref()` is the recommended way to declare reactive state in Composition API

Show that refs must be accessed via `.value` in JavaScript but are auto-unwrapped in templates

Demonstrate basic usage:

```javascript

import { ref } from 'vue'

const count = ref(0)

console.log(count.value) // 0

count.value++

console.log(count.value) // 1

```

**For Using `<script setup>` Syntax:**

Explain that `<script setup>` simplifies Composition API usage in SFCs

Show that top-level imports, variables, and functions are automatically available in templates

Provide example:

```vue

import { ref } from 'vue'

const count = ref(0)

function increment() {

count.value++

}

</script>

<button @click="increment">{{ count }}</button>

</template>

```

**For `reactive()` vs `ref()`:**

Explain that `reactive()` works only with objects (not primitives)

Note that `reactive()` doesn't require `.value` access

Highlight limitations: cannot replace entire object, loses reactivity when destructured

Show when to use each:

```javascript

// Use ref() for primitives

const count = ref(0)

// Use ref() for objects that might be replaced

const user = ref({ name: 'John' })

// Use reactive() for local object state that won't be replaced

const state = reactive({

count: 0,

items: []

})

```

**For Computed Properties:**

Explain that computed properties derive reactive values from other reactive sources

Show basic computed usage:

```javascript

import { ref, computed } from 'vue'

const count = ref(0)

const doubled = computed(() => count.value * 2)

console.log(doubled.value) // 0

count.value++

console.log(doubled.value) // 2

```

**For Deep Reactivity:**

Explain that Vue provides deep reactivity by default

Show that nested objects and arrays are automatically reactive:

```javascript

const obj = ref({

nested: { count: 0 },

arr: ['foo', 'bar']

})

// These mutations will be detected

obj.value.nested.count++

obj.value.arr.push('baz')

```

**For Ref Unwrapping Caveats:**

Explain that refs are auto-unwrapped in templates

Note that refs inside reactive objects are unwrapped

Warn about refs in arrays and collections not being unwrapped:

```javascript

const books = reactive([ref('Vue 3 Guide')])

// Need .value here

console.log(books[0].value)

const map = reactive(new Map([['count', ref(0)]]))

// Need .value here too

console.log(map.get('count').value)

```

3. Implement Code Changes

When implementing reactivity patterns:

Read existing component files first to understand current structure

Use `ref()` as the default choice for reactive state

Use `<script setup>` syntax in Single-File Components for cleaner code

Ensure refs are accessed with `.value` in JavaScript but not in templates

Use computed properties for derived state

Avoid using arrow functions in Options API methods (if applicable)

4. Explain Key Concepts

Always clarify these important points:

**Why refs use `.value`:** Vue needs to intercept get/set operations to track dependencies; `.value` provides this interception point

**Proxy vs Original:** In Vue 3, reactive state uses JavaScript Proxies; the original object remains non-reactive

**DOM Update Timing:** DOM updates are batched and asynchronous; use `nextTick()` to wait for DOM updates

**Deep Reactivity:** Vue tracks nested object/array mutations automatically unless using shallow refs

5. Best Practices

Recommend these patterns:

Prefer `ref()` over `reactive()` for simplicity and consistency

Use `<script setup>` for cleaner, more concise code

Use computed properties instead of methods for derived values

Avoid destructuring reactive objects unless using `toRefs()`

Use `nextTick()` when you need to access updated DOM after state change

6. Common Pitfalls to Address

Help users avoid these issues:

Forgetting `.value` when accessing refs in JavaScript

Using arrow functions in Options API methods

Destructuring reactive objects without `toRefs()`

Replacing entire `reactive()` objects (breaks reactivity)

Accessing refs inside arrays/Maps without `.value`

Examples

**Example 1: Converting Options API to Composition API**

```javascript

// Before (Options API)

export default {

data() {

return { count: 0 }

computed: {

doubled() {

return this.count * 2

}

methods: {

increment() {

this.count++

}

// After (Composition API with <script setup>)

import { ref, computed } from 'vue'

const count = ref(0)

const doubled = computed(() => count.value * 2)

function increment() {

count.value++

}

</script>

```

**Example 2: Choosing Between ref() and reactive()**

```javascript

// Good: ref() for primitives and replaceable objects

const count = ref(0)

const user = ref({ name: 'John', age: 30 })

// Can replace entire object

user.value = { name: 'Jane', age: 25 }

// Avoid: reactive() loses reactivity when replaced

const state = reactive({ count: 0 })

// This breaks reactivity!

state = reactive({ count: 1 })

```

Additional Notes

Reference official docs: https://vuejs.org/guide/essentials/reactivity-fundamentals.html

For advanced reactivity topics, see "Reactivity in Depth" section

Vue 3 uses ES6 Proxies; IE11 not supported

Use `shallowRef()` and `shallowReactive()` for performance optimization with large objects

Integration with external state systems may require special handling

When to Use This Skill

Use this skill when:

Building new Vue 3 components with Composition API

Migrating from Vue 2 or Options API to Composition API

Debugging reactivity issues in Vue 3 applications

Teaching or learning Vue 3 reactivity concepts

Optimizing reactive state management patterns

Choosing between different reactivity APIs

Vue 3 Reactivity Fundamentals

Safety Concern

Vue 3 Reactivity Fundamentals

What This Skill Does

Instructions

1. Assess the User's Needs

2. Provide Relevant Guidance

3. Implement Code Changes

4. Explain Key Concepts

5. Best Practices

6. Common Pitfalls to Address

Examples

Additional Notes

When to Use This Skill

Reviews (0)