Refs & Reactive

Code

import { ref, reactive, isRef } from "vue";

const count = ref(0);          // primitive / object wrapper
console.log(count.value);      // access via .value
count.value++;

const state = reactive({
  user: { name: "Alice", age: 30 },
  todos: []
});
state.user.age = 31;           // direct mutation, no .value

// Reactive destructuring loses reactivity; use toRefs
const { user } = state;
console.log(isRef(count));     // true

Explanation

ref wraps any value in a reactive object accessed via .value, ideal for primitives. reactive deeply converts an object so direct property mutations stay reactive. Destructuring reactive objects breaks reactivity; use toRefs to preserve it on each field.

More Vue 3 Snippets