Vue 3 Composition API vs Options API: When to Use Each (With Examples)

<script>
export default {
  data() {
    return {
      // User data
      user: null,
      userLoading: false,
      userError: null,
      
      // Form data
      formData: { name: '', email: '' },
      formDirty: false,
      
      // Validation
      errors: {},
      isValid: false
    }
  },
  
  computed: {
    // User computed
    fullName() { return `${this.user?.firstName} ${this.user?.lastName}` },
    
    // Form computed
    hasChanges() { return JSON.stringify(this.formData) !== JSON.stringify(this.originalData) },
    
    // Validation computed
    canSubmit() { return this.isValid && this.hasChanges && !this.userLoading }
  },
  
  methods: {
    // User methods
    async fetchUser() { /* ... */ },
    
    // Form methods
    updateField(field, value) { /* ... */ },
    resetForm() { /* ... */ },
    
    // Validation methods
    validateField(field) { /* ... */ },
    validateAll() { /* ... */ },
    
    // Submit
    async submitForm() { /* ... */ }
  },
  
  watch: {
    // Watch for user changes
    user(newUser) { /* ... */ },
    
    // Watch for form validation
    formData: { deep: true, handler() { /* ... */ } }
  },
  
  mounted() {
    this.fetchUser()
  }
}
</script>

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

// ========== User Feature ==========
const user = ref(null)
const userLoading = ref(false)
const userError = ref(null)

const fullName = computed(() => 
  `${user.value?.firstName} ${user.value?.lastName}`
)

async function fetchUser() {
  userLoading.value = true
  try {
    user.value = await api.getUser()
  } catch (e) {
    userError.value = e.message
  } finally {
    userLoading.value = false
  }
}

// ========== Form Feature ==========
const formData = ref({ name: '', email: '' })
const originalData = ref(null)

const hasChanges = computed(() => 
  JSON.stringify(formData.value) !== JSON.stringify(originalData.value)
)

function updateField(field, value) {
  formData.value[field] = value
}

function resetForm() {
  formData.value = { ...originalData.value }
}

// ========== Validation Feature ==========
const errors = ref({})

const isValid = computed(() => Object.keys(errors.value).length === 0)
const canSubmit = computed(() => isValid.value && hasChanges.value && !userLoading.value)

function validateField(field) {
  // validation logic
}

watch(formData, () => validateAll(), { deep: true })

// ========== Submit ==========
async function submitForm() {
  if (!canSubmit.value) return
  // submit logic
}

onMounted(fetchUser)
</script>

// composables/useForm.ts
import { ref, computed, watch } from 'vue'

export function useForm<T extends Record<string, any>>(initialData: T) {
  const data = ref({ ...initialData }) as Ref<T>
  const originalData = ref({ ...initialData }) as Ref<T>
  const errors = ref<Record<string, string>>({})
  const isDirty = ref(false)

  const isValid = computed(() => Object.keys(errors.value).length === 0)
  
  const hasChanges = computed(() => 
    JSON.stringify(data.value) !== JSON.stringify(originalData.value)
  )

  function setField<K extends keyof T>(field: K, value: T[K]) {
    data.value[field] = value
    isDirty.value = true
  }

  function setError(field: string, message: string) {
    errors.value[field] = message
  }

  function clearError(field: string) {
    delete errors.value[field]
  }

  function reset() {
    data.value = { ...originalData.value }
    errors.value = {}
    isDirty.value = false
  }

  function setOriginal(newData: T) {
    originalData.value = { ...newData }
    data.value = { ...newData }
    isDirty.value = false
  }

  return {
    data,
    errors,
    isDirty,
    isValid,
    hasChanges,
    setField,
    setError,
    clearError,
    reset,
    setOriginal
  }
}