Why Vue3’s Composition API Beats Mixins: Benefits, Code & Migration

Mixins' Golden Age and Pitfalls

In Vue2, mixins were the primary way to reuse code across components, allowing developers to write logic once and inject it into many components. While initially elegant, several issues emerge as projects grow:

Naming conflicts are hard to avoid; overlapping methods and properties merge into the component instance, and conflict resolution rules are unintuitive.

Source of methods becomes unclear, increasing cognitive load when reading component code.

Implicit dependencies between mixins make maintenance difficult.

Reusability is limited because mixin logic is tightly coupled to Vue’s component lifecycle.

Composition API: Functional Programming Victory

Vue3 addresses these challenges with the Composition API, inspired partly by React Hooks but aligned with Vue’s philosophy. It shifts component logic from the declarative Options API to flexible, function‑based composition.

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

export function useUserStatus() {
  const isOnline = ref(false)

  const checkStatus = () => {
    // Check user status logic
    isOnline.value = navigator.onLine
  }

  watch(isOnline, (newStatus) => {
    console.log(`用户状态变为: ${newStatus ? '在线' : '离线'}`)
  })

  onMounted(() => {
    checkStatus()
    window.addEventListener('online', () => (isOnline.value = true))
    window.addEventListener('offline', () => (isOnline.value = false))
  })

  return { isOnline, checkStatus }
}

The Composition API brings clear advantages:

Explicit dependencies: function parameters and return values make relationships obvious.

Clear source: using composition functions, developers always know where each property or method originates.

Additional benefits include controllable naming conflicts via JavaScript destructuring, logical grouping of related functionality, and seamless TypeScript integration that improves IDE assistance.

const { isOnline: userOnlineStatus } = useUserStatus()

Real‑World Migration

A fintech company refactored its trading platform by moving from mixins to the Composition API. The original mixin‑based permission system caused implicit dependencies, such as tradingMixin relying on userPermissionMixin.hasPermission without obvious links.

After migration, the code became explicit and maintainable:

// Permission composition function
export function usePermissions() {
  const permissions = ref([])
  function hasPermission(code) {
    return permissions.value.includes(code)
  }
  function loadPermissions() {
    // Load permissions logic
  }
  onMounted(() => {
    loadPermissions()
  })
  return { permissions, hasPermission, loadPermissions }
}

// Trading composition function
export function useTrading({ hasPermission }) {
  function executeTrade() {
    if (hasPermission('TRADE_EXECUTE')) {
      // Execute trade logic
    }
  }
  return { executeTrade }
}

export default {
  setup() {
    const { hasPermission } = usePermissions()
    const { executeTrade } = useTrading({ hasPermission })
    return { hasPermission, executeTrade }
  }
}

The refactored version makes dependencies explicit, dramatically improving code maintainability. Vue still supports mixins, providing a migration guide for gradual transition.