Vue.js Quick Reference

import { ref, reactive, computed, watch, watchEffect, toRefs } from 'vue'

const count = ref(0)               // count.value to read/write
const user = reactive({ name: 'Ada', age: 30 }) // access as user.name

const doubled = computed(() => count.value * 2) // cached, read-only by default

watch(count, (newVal, oldVal) => {
  console.log(`count: ${oldVal} -> ${newVal}`)
})

watchEffect(() => {
  console.log(`count is now ${count.value}`) // runs immediately + on change
})

const { name, age } = toRefs(user) // preserves reactivity when destructuring

<template>
  <p v-if="isLoggedIn">Welcome back</p>
  <p v-else-if="isLoading">Loading…</p>
  <p v-else>Please log in</p>

  <li v-for="item in items" :key="item.id">{{ item.label }}</li>

  <button @click="handleSave">Save</button>
  <input v-model="searchQuery" placeholder="Search…" />

  <img :src="avatarUrl" :alt="user.name" />
  <div v-show="isVisible">Toggled with display: none</div>
</template>

<!-- Child.vue -->
<script setup>
import { onMounted, onUnmounted } from 'vue'

const props = defineProps({
  label: { type: String, required: true },
  count: { type: Number, default: 0 },
})

const emit = defineEmits(['update:count'])

function increment() {
  emit('update:count', props.count + 1)
}

onMounted(() => console.log('DOM is ready'))
onUnmounted(() => console.log('cleanup: remove listeners, cancel timers'))
</script>

<template>
  <button @click="increment">{{ label }}: {{ count }}</button>
</template>

<!-- Parent.vue -->
<!-- <Child :label="'Clicks'" v-model:count="clickCount" /> -->