Vue 3 cheatsheet
Vue 3: Reactivity
6 common Vue 3 tasks.
Create reactive state
Wrap a value in ref and read or write it with .value in script.
const count = ref(0);
count.value++;
Create a reactive object
Make an object deeply reactive.
const state = reactive({ name: "Ada", age: 36 });
Derive a value
Cache a value computed from other state.
const double = computed(() => count.value * 2);
React to a change
Run code when a source changes.
watch(count, (newValue, oldValue) => {
console.log(newValue, oldValue);
});
Run an effect with automatic tracking
Run immediately and re-run when any reactive value it reads changes.
watchEffect(() => console.log(count.value));
Run code after mounting
Use lifecycle hooks such as onMounted and onUnmounted.
onMounted(() => {
console.log("mounted");
});