Why Composition API?

Composition API organizes code by feature instead of option type. Better TypeScript support and code reuse through composables.

Reactive State

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

const count = ref(0);
const state = reactive({ name: 'Vue', version: 3 });

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

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

Component Example

<script setup>
import { ref } from 'vue';

const message = ref('Hello Vue 3!');
</script>

<template>
  <h1>{{ message }}</h1>
  <input v-model="message" />
</template>

Composables

// composables/useMouse.js
export function useMouse() {
  const x = ref(0);
  const y = ref(0);
  
  onMounted(() => {
    window.addEventListener('mousemove', update);
  });
  
  return { x, y };
}

Conclusion

Composition API is the future of Vue development. It offers better organization and reusability for complex applications.