Refs & Reactive

Choose between ref and reactive for reactive state.

#reactivity#ref#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

All snippets