Comparison between Composition API and Options API

Author：Chuan Chen 阅读数：14371人阅读分类： Vue.js

Composition API vs. Options API

Vue.js provides two ways to write component logic: Options API and Composition API. The Options API is the primary programming paradigm in Vue 2.x and earlier versions, while the Composition API is a new feature introduced in Vue 3.x. Both have their own characteristics and are suitable for different development scenarios and programming styles.

Basic Structure of Options API

The Options API organizes code by defining different option objects, including data, methods, computed, watch, and other options:

// Options API example
export default {
  data() {
    return {
      count: 0,
      message: 'Hello Vue!'
    }
  },
  methods: {
    increment() {
      this.count++
    },
    showMessage() {
      alert(this.message)
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count changed from ${oldVal} to ${newVal}`)
    }
  },
  mounted() {
    console.log('Component mounted')
  }
}

This organizational approach scatters code of the same functionality across different options, which is clear and intuitive for small components. However, as component complexity increases, related logic becomes dispersed across multiple options, making the code harder to maintain.

Basic Structure of Composition API

The Composition API uses the setup function as the component entry point, organizing code by importing and calling various functions:

// Composition API example
import { ref, computed, watch, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const message = ref('Hello Vue!')
    
    const doubleCount = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    function showMessage() {
      alert(message.value)
    }
    
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`)
    })
    
    onMounted(() => {
      console.log('Component mounted')
    })
    
    return {
      count,
      message,
      doubleCount,
      increment,
      showMessage
    }
  }
}

The Composition API centralizes related logic, constructing component logic through function composition, making it more suitable for organizing and reusing complex components.

Logic Reuse Comparison

The Options API primarily achieves logic reuse through mixins:

// Options API mixin example
const counterMixin = {
  data() {
    return {
      mixinCount: 0
    }
  },
  methods: {
    mixinIncrement() {
      this.mixinCount++
    }
  }
}

export default {
  mixins: [counterMixin],
  // Other options...
}

Mixins suffer from naming conflicts and unclear origins. The Composition API achieves more flexible logic reuse through custom hook functions:

// Composition API custom hook
import { ref } from 'vue'

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

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

export default {
  setup() {
    const { count, increment } = useCounter()
    
    return {
      count,
      increment
    }
  }
}

Custom hooks clearly indicate the source of functionality, avoid naming conflicts, and allow parameter passing for customization.

TypeScript Support

The Composition API offers better TypeScript support:

// Composition API + TypeScript
import { ref } from 'vue'

interface User {
  name: string
  age: number
}

export default {
  setup() {
    const user = ref<User>({
      name: 'Alice',
      age: 25
    })
    
    function updateUser(newUser: Partial<User>) {
      user.value = { ...user.value, ...newUser }
    }
    
    return {
      user,
      updateUser
    }
  }
}

In contrast, the Options API requires additional type declarations for TypeScript support:

// Options API + TypeScript
import { defineComponent } from 'vue'

interface User {
  name: string
  age: number
}

export default defineComponent({
  data() {
    return {
      user: {
        name: 'Alice',
        age: 25
      } as User
    }
  },
  methods: {
    updateUser(newUser: Partial<User>) {
      this.user = { ...this.user, ...newUser }
    }
  }
})

Reactive Data Declaration

The Options API uses the data option to declare reactive data:

export default {
  data() {
    return {
      user: {
        name: 'Alice',
        age: 25
      },
      items: []
    }
  }
}

The Composition API uses ref or reactive:

import { ref, reactive } from 'vue'

export default {
  setup() {
    const user = reactive({
      name: 'Alice',
      age: 25
    })
    
    const items = ref([])
    
    return {
      user,
      items
    }
  }
}

ref is used for primitive types and object references, while reactive is used for complex objects. The Composition API's reactivity system is more flexible, allowing reactive state to be created independently of components.

Lifecycle Hooks

The Options API defines lifecycle hooks directly as options:

export default {
  created() {
    console.log('Component created')
  },
  mounted() {
    console.log('Component mounted')
  },
  beforeUnmount() {
    console.log('Component will unmount')
  }
}

The Composition API uses corresponding functions:

import { onMounted, onBeforeUnmount } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted')
    })
    
    onBeforeUnmount(() => {
      console.log('Component will unmount')
    })
  }
}

The Composition API's lifecycle functions can be called multiple times in setup and placed inside conditional statements, offering greater flexibility.

Code Organization

The Options API enforces organizing code by option type:

- data
- methods
- computed
- watch
- lifecycle hooks

This organization is intuitive for simple components but scatters related logic across different options in complex components.

The Composition API allows organizing code by functionality:

- Feature A
  - Data
  - Methods
  - Computed properties
  - Watchers
- Feature B
  - Data
  - Methods
  - Computed properties
  - Watchers

This approach keeps related code together, making it easier to maintain and understand.

Performance Considerations

The Composition API has some performance advantages:

Better Tree-shaking support: Functions in the Composition API can be imported individually, and unused features can be properly tree-shaken.
Lower memory overhead: The Composition API does not require maintaining the this context of the Options API.
More efficient reactivity system: Vue 3's reactivity system works better with the Composition API.