vue-composition-api

Ref vs Reactive - When to Use Each Use Ref For import { ref } from 'vue';

// Primitives const count = ref(0); const name = ref('John'); const isActive = ref(true);

// Single object that needs replacement const user = ref({ name: 'John', age: 30 }); user.value = { name: 'Jane', age: 25 }; // Works

// Arrays that need replacement const items = ref([1, 2, 3]); items.value = [4, 5, 6]; // Works

Use Reactive For import { reactive, toRefs } from 'vue';

// Complex nested objects const state = reactive({ user: { name: 'John', age: 30 }, settings: { theme: 'dark', notifications: true }, posts: [] });

// Group related state const formState = reactive({ name: '', email: '', password: '', errors: {} });

// Convert to refs for destructuring const { name, email } = toRefs(formState);

Avoid Reactive For // DON'T: Replacing entire reactive object loses reactivity let state = reactive({ count: 0 }); state = reactive({ count: 1 }); // Breaks reactivity!

// DO: Use ref instead const state = ref({ count: 0 }); state.value = { count: 1 }; // Works

Computed Properties Patterns Basic Computed import { ref, computed } from 'vue';

const firstName = ref('John'); const lastName = ref('Doe');

const fullName = computed(() => { return ${firstName.value} ${lastName.value}; });

Writable Computed const fullName = computed({ get() { return ${firstName.value} ${lastName.value}; }, set(value) { const names = value.split(' '); firstName.value = names[0] || ''; lastName.value = names[1] || ''; } });

// Can now set fullName.value = 'Jane Smith';

Computed with Complex Logic interface Product { id: number; name: string; price: number; quantity: number; }

const cart = ref([]);

const cartSummary = computed(() => { const total = cart.value.reduce((sum, item) => sum + (item.price * item.quantity), 0 );

const itemCount = cart.value.reduce((sum, item) => sum + item.quantity, 0 );

const tax = total * 0.08; const grandTotal = total + tax;

return { total, itemCount, tax, grandTotal }; });

Watch and WatchEffect Watch - Explicit Dependencies import { ref, watch } from 'vue';

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

// Watch single source watch(count, (newValue, oldValue) => { console.log(Count changed from ${oldValue} to ${newValue}); });

// Watch multiple sources watch( [count, name], ([newCount, newName], [oldCount, oldName]) => { console.log('Multiple values changed'); } );

// Watch reactive object property const user = reactive({ name: 'John', age: 30 });

watch( () => user.name, (newName) => { console.log(Name changed to ${newName}); } );

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

WatchEffect - Auto Tracking import { ref, watchEffect } from 'vue';

const count = ref(0); const multiplier = ref(2);

// Automatically tracks dependencies watchEffect(() => { console.log(Result: ${count.value * multiplier.value}); });

// Runs immediately and whenever dependencies change

Advanced Watch Options const data = ref(null);

watch( source, (newValue, oldValue) => { // Callback logic }, { immediate: true, // Run immediately deep: true, // Deep watch objects flush: 'post', // Timing: 'pre' | 'post' | 'sync' onTrack(e) { // Debug console.log('tracked', e); }, onTrigger(e) { // Debug console.log('triggered', e); } } );

// Stop watching const stop = watch(source, callback); stop(); // Cleanup

Lifecycle Hooks in Composition API import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured, onActivated, onDeactivated } from 'vue';

export default { setup() { onBeforeMount(() => { console.log('Before mount'); });

onMounted(() => {
  console.log('Mounted');
  // DOM is available
  // Setup event listeners, fetch data
});

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

onUpdated(() => {
  console.log('Updated');
  // DOM has been updated
});

onBeforeUnmount(() => {
  console.log('Before unmount');
  // Cleanup before unmount
});

onUnmounted(() => {
  console.log('Unmounted');
  // Final cleanup
});

onErrorCaptured((err, instance, info) => {
  console.error('Error captured:', err, info);
  return false; // Stop propagation
});

// For components wrapped in <KeepAlive>
onActivated(() => {
  console.log('Component activated');
});

onDeactivated(() => {
  console.log('Component deactivated');
});

} };

Composables - Reusable Composition Functions Simple Composable // composables/useCounter.ts import { ref, computed } from 'vue';

export function useCounter(initialValue = 0) { const count = ref(initialValue); const doubled = computed(() => count.value * 2);

function increment() { count.value++; }

function decrement() { count.value--; }

function reset() { count.value = initialValue; }

return { count: readonly(count), doubled, increment, decrement, reset }; }

// Usage

Advanced Composable with Side Effects // composables/useFetch.ts import { ref, unref, watchEffect } from 'vue'; import type { Ref } from 'vue';

export function useFetch(url: Ref | string) { const data = ref(null); const error = ref(null); const loading = ref(false);

async function fetchData() { loading.value = true; error.value = null;

try {
  const response = await fetch(unref(url));
  if (!response.ok) throw new Error('Fetch failed');
  data.value = await response.json();
} catch (e) {
  error.value = e as Error;
} finally {
  loading.value = false;
}

}

watchEffect(() => { fetchData(); });

return { data: readonly(data), error: readonly(error), loading: readonly(loading), refetch: fetchData }; }

// Usage

Composable with Cleanup // composables/useEventListener.ts import { onMounted, onUnmounted } from 'vue';

export function useEventListener( target: EventTarget, event: string, handler: (e: Event) => void ) { onMounted(() => { target.addEventListener(event, handler); });

onUnmounted(() => { target.removeEventListener(event, handler); }); }

// Usage

Props and Emits in Composition API TypeScript Props