ref vs reactive
One line: prefer ref.
import { ref, reactive } from 'vue'
// ✅ Recommended: ref handles both primitives and objects
const count = ref(0)
const user = ref({ name: 'Alice', age: 18 })
// ⚠️ Only reach for reactive when you know it will only ever hold an object
const state = reactive({ count: 0 })reactive has two traps:
- You can’t destructure it (destructuring loses reactivity)
- You can’t replace it wholesale (only assign key by key)
computed is cached
As long as the dependencies don’t change, reading it repeatedly computes once:
const fullName = computed(() => `${first.value} ${last.value}`)
console.log(fullName.value) // computes
console.log(fullName.value) // cache hitThree ways to write watch
// watch a ref
watch(count, (n, o) => console.log(n, o))
// watch a getter
watch(() => user.value.age, (n) => console.log(n))
// run immediately + deep
watch(source, cb, { immediate: true, deep: true })Remember: watchEffect collects dependencies for you, but it’s harder to debug. Use it sparingly.