Reactivity BasicsBeginner
1Question 1 of 1
vueHow does Vue 3 Reactivity and the Composition API (ref, reactive, computed) work?
Explanation & Concept
Vue 3's reactivity system uses JavaScript `Proxy` objects to intercept property access (`get`) and mutation (`set`).
• `ref()`: Wraps primitives or objects in a reactive reference accessible via `.value`. • `reactive()`: Returns a deeply reactive proxy of an object. • `computed()`: Returns a cached, read-only reactive reference that only updates when its dependencies change.
Code Example
vue
<script setup>
import { ref, computed } from "vue";
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
function increment() {
count.value++;
}
</script>
<template>
<div class="p-4">
<p>Count: {{ count }} (Double: {{ doubleCount }})</p>
<button @click="increment">Increment</button>
</div>
</template>How It Works & Key Takeaways
`<script setup>` is compile-time syntactic sugar that automatically exposes declared variables directly to the Vue template without returning them.
Mock Test · 1 Questions · Optional
Ready for Composition API?
Take a quick test to evaluate yourself, or move straight to the next module.
Beginner3 questions