Vue API Reference

Core API Categories

ref(), reactive(), 
computed()

onMounted(), 
onUpdated()

defineProps(), 
defineEmits()

nextTick(), 
watch()

🔹 Reactivity API

Create and manage reactive state:

import { ref, reactive, computed, readonly } from 'vue'

// ref - for primitive values
const count = ref(0)
count.value++ // access with .value

// reactive - for objects
const state = reactive({
  name: 'Vue',
  version: 3
})
state.name = 'Vue.js' // direct access

// computed - derived state
const double = computed(() => count.value * 2)

// readonly - prevent modifications
const immutable = readonly(state)

count.value: 1
double.value: 2
state.name: "Vue.js"

🔹 Watch API

React to data changes:

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

const count = ref(0)
const name = ref('Vue')

// watch - specific source
watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`)
})

// watch multiple sources
watch([count, name], ([newCount, newName]) => {
  console.log(`Count: ${newCount}, Name: ${newName}`)
})

// watchEffect - automatic dependency tracking
watchEffect(() => {
  console.log(`Count is ${count.value}`)
})

🔹 Component API

Define component properties and events:

<script setup>
import { defineProps, defineEmits, defineExpose } from 'vue'

// Define props
const props = defineProps({
  title: String,
  count: {
    type: Number,
    default: 0
  }
})

// Define emits
const emit = defineEmits(['update', 'delete'])

// Emit event
const handleClick = () => {
  emit('update', props.count + 1)
}

// Expose to parent (via ref)
defineExpose({
  reset: () => console.log('Reset called')
})
</script>

🔹 Lifecycle Hooks API

Execute code at specific lifecycle stages:

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

onBeforeMount(() => {
  console.log('Before mount')
})

onMounted(() => {
  console.log('Mounted - DOM ready')
})

onBeforeUpdate(() => {
  console.log('Before update')
})

onUpdated(() => {
  console.log('Updated - DOM updated')
})

onBeforeUnmount(() => {
  console.log('Before unmount - cleanup')
})

onUnmounted(() => {
  console.log('Unmounted')
})

🔹 Template Refs API

Access DOM elements and component instances:

<template>
  <input ref="inputRef" />
  <ChildComponent ref="childRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue'

const inputRef = ref(null)
const childRef = ref(null)

onMounted(() => {
  // Access DOM element
  inputRef.value.focus()
  
  // Access child component
  childRef.value.someMethod()
})
</script>

🔹 Utility Functions

Helper functions for common tasks:

import { nextTick, toRaw, toRef, unref } from 'vue'

// nextTick - wait for DOM update
await nextTick()
console.log('DOM updated')

// toRaw - get original object from reactive
const raw = toRaw(reactiveObj)

// toRef - create ref from reactive property
const nameRef = toRef(state, 'name')

// unref - get value (works with ref and non-ref)
const value = unref(maybeRef)

🔹 Provide / Inject API

Share data across component tree:

// Parent component
import { provide, ref } from 'vue'

const theme = ref('dark')
provide('theme', theme)

// Child component (any level deep)
import { inject } from 'vue'

const theme = inject('theme')
console.log(theme.value) // 'dark'

// With default value
const user = inject('user', { name: 'Guest' })

🔹 Custom Composables

Create reusable logic with Composition API:

// useCounter.js
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initialValue
  
  return { count, increment, decrement, reset }
}

// Usage in component
import { useCounter } from './useCounter'

const { count, increment, decrement } = useCounter(10)

🔹 Application API

Configure and mount Vue applications:

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// Global properties
app.config.globalProperties.$api = apiClient

// Global components
app.component('GlobalButton', Button)

// Plugins
app.use(router)
app.use(store)

// Mount
app.mount('#app')

🔹 Quick Reference Table