Vue.js 3 Composition API Cheat Sheet

Cria uma referência reativa para valores primitivos.

const count = ref(0);

Cria um objeto reativo.

const state = reactive({ name: 'Vue' });

Cria uma propriedade computada que reage a mudanças.

const double = computed(() => count.value * 2);

Observa mudanças em uma fonte reativa e executa um callback.

watch(count, (newVal) => { ... });

Hook executado quando o componente é montado no DOM.

onMounted(() => { ... });

Define as propriedades que o componente recebe.

defineProps(['title']);

Define os eventos que o componente pode disparar.

defineEmits(['change']);

Diretiva de renderização condicional.

<template v-if="ativo">
  <span>Ativo</span>
</template>