Vue.js 3 Composition API Guide

import { ref } from 'vue'

export default {
  setup() {
    // Create reactive references
    const count = ref(0)
    const message = ref('Hello Vue 3!')
    const user = ref({ name: 'John', age: 25 })

    // Access and modify using .value
    function increment() {
      count.value++  // Must use .value in JavaScript
    }

    function updateUser() {
      user.value.name = 'Jane'  // Deep reactivity
    }

    // Return values for template
    return { count, message, user, increment, updateUser }
  }
}

<template>
  <div>
    <!-- No .value needed in templates! -->
    <p>Count: {{ count }}</p>
    <p>{{ message }}</p>
    <p>User: {{ user.name }}, Age: {{ user.age }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

import { reactive } from 'vue'

export default {
  setup() {
    // Create a reactive object
    const state = reactive({
      count: 0,
      user: {
        name: 'John',
        email: 'john@example.com'
      },
      items: ['Apple', 'Banana', 'Orange']
    })

    // Direct property access - no .value needed!
    function increment() {
      state.count++
    }

    function addItem(item) {
      state.items.push(item)  // Array methods are reactive
    }

    function updateUser(name) {
      state.user.name = name  // Nested objects are reactive
    }

    return { state, increment, addItem, updateUser }
  }
}

import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')
    const items = ref([
      { name: 'Apple', price: 1.5 },
      { name: 'Banana', price: 0.75 },
      { name: 'Orange', price: 2.0 }
    ])

    // Read-only computed (most common)
    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`
    })

    // Computed with getter and setter
    const fullNameWritable = computed({
      get() {
        return `${firstName.value} ${lastName.value}`
      },
      set(newValue) {
        const [first, last] = newValue.split(' ')
        firstName.value = first
        lastName.value = last || ''
      }
    })

    // Computed for derived data
    const totalPrice = computed(() => {
      return items.value.reduce((sum, item) => sum + item.price, 0)
    })

    const expensiveItems = computed(() => {
      return items.value.filter(item => item.price > 1)
    })

    return { 
      firstName, lastName, fullName, fullNameWritable,
      items, totalPrice, expensiveItems 
    }
  }
}

import { ref, reactive, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const searchQuery = ref('')
    const user = reactive({ name: 'John', age: 25 })

    // Watch a single ref
    watch(count, (newVal, oldVal) => {
      console.log(`Count changed: ${oldVal} → ${newVal}`)
    })

    // Watch with options
    watch(searchQuery, async (newQuery) => {
      if (newQuery.length > 2) {
        const results = await fetchSearchResults(newQuery)
        // Update results...
      }
    }, { 
      debounce: 300,  // Not a built-in option; Vue ignores it, so debounce yourself
      immediate: false // Don't run on mount
    })

    // Watch a reactive object property (use getter)
    watch(
      () => user.name,
      (newName) => {
        console.log(`User name changed to: ${newName}`)
      }
    )

    // Watch multiple sources
    watch(
      [count, () => user.age],
      ([newCount, newAge], [oldCount, oldAge]) => {
        console.log(`Count or age changed`)
      }
    )

    // Deep watch entire object
    watch(user, (newUser) => {
      console.log('User object changed', newUser)
    }, { deep: true })

    return { count, searchQuery, user }
  }
}

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const message = ref('Hello')

    // Runs immediately and re-runs when count or message changes
    watchEffect(() => {
      console.log(`Count: ${count.value}, Message: ${message.value}`)
      // Vue automatically tracks count and message as dependencies
    })

    // With cleanup function (useful for subscriptions)
    watchEffect((onCleanup) => {
      const timer = setInterval(() => {
        console.log('Tick', count.value)
      }, 1000)

      // Cleanup runs before effect re-runs or on unmount
      onCleanup(() => {
        clearInterval(timer)
      })
    })

    // Stop a watcher manually
    const stop = watchEffect(() => { /* ... */ })
    // Later: stop() to stop watching

    return { count, message }
  }
}

import { 
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

export default {
  setup() {
    const count = ref(0)
    const elementRef = ref(null)

    onBeforeMount(() => {
      console.log('Component is about to mount')
      // DOM not available yet
    })

    onMounted(() => {
      console.log('Component mounted!')
      // DOM is now available
      console.log(elementRef.value) // Access DOM element
      
      // Common: fetch data, set up subscriptions
      fetchData()
    })

    onBeforeUpdate(() => {
      console.log('Component is about to update')
    })

    onUpdated(() => {
      console.log('Component updated!')
    })

    onBeforeUnmount(() => {
      console.log('Component is about to unmount')
      // Start cleanup
    })

    onUnmounted(() => {
      console.log('Component unmounted!')
      // Clean up: remove event listeners, cancel subscriptions
    })

    return { count, elementRef }
  }
}

import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => {
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })

  return { x, y }
}

import { ref, watchEffect, toValue } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(false)

  watchEffect(async () => {
    // toValue() handles both refs and plain values
    const urlValue = toValue(url)
    
    loading.value = true
    error.value = null
    
    try {
      const response = await fetch(urlValue)
      data.value = await response.json()
    } catch (e) {
      error.value = e
    } finally {
      loading.value = false
    }
  })

  return { data, error, loading }
}

<script setup>
import { useMouse } from './composables/useMouse'
import { useFetch } from './composables/useFetch'

// Use mouse position
const { x, y } = useMouse()

// Fetch data
const { data: users, loading, error } = useFetch('/api/users')
</script>

<template>
  <div>
    <p>Mouse: ({{ x }}, {{ y }})</p>
    
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <ul v-else>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>