Computed & Watch

Derive values with computed and react to changes with watch.

#computed#watch#reactivity

Code

import { ref, computed, watch, watchEffect } from "vue";

const price = ref(100);
const qty = ref(2);

const total = computed(() => price.value * qty.value);
console.log(total.value);     // 200

// Watch a specific source, runs lazily
watch(price, (newVal, oldVal) => {
  console.log("price:", oldVal, "->", newVal);
});

// watchEffect auto-tracks dependencies, runs immediately
watchEffect(() => {
  console.log("total is", total.value);
});

All snippets