Training Trains Internship
Student login
← Vue.js learning path
Vue.js · Module 3 of 10

Reactivity with ref and reactive

Create reactive state using the Composition API.

📖 Key ideas

  1. ref(0) creates a reactive value; use .value in script.
  2. reactive({}) makes a reactive object.
  3. In templates, refs unwrap automatically (no .value).
  4. <script setup> is the concise Composition API syntax.
  5. Vue tracks which components use which data.
💡 Real-life example: ref is a box with a bell: whenever you change what is inside, everyone listening hears it.
ref()Reactive wrapper for any value
reactive()Reactive object
.valueAccess a ref in script
<script setup>Compact Composition API syntax