The design philosophy of the Composition API

The Design Philosophy of the Composition API

The Composition API is one of the most important innovations in Vue 3, fundamentally changing how Vue components are organized. This API style allows developers to group related logic together, rather than forcibly separating code according to the lifecycle or functional types of the Options API.

Separation of Logical Concerns

The traditional Options API enforces code separation by functional types, causing related business logic to be scattered across different options. The Composition API solves this problem with the setup() function:

// Problem with Options API: Related logic is scattered
export default {
  data() {
    return {
      count: 0,
      double: 0
    }
  },
  watch: {
    count(newVal) {
      this.double = newVal * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

// Composition API solution
import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const double = ref(0)
    
    watch(count, (newVal) => {
      double.value = newVal * 2
    })
    
    function increment() {
      count.value++
    }
    
    return { count, double, increment }
  }
}

Better Type Inference

The Composition API is inherently more TypeScript-friendly because its return types can be explicitly declared:

import { ref } from 'vue'

export default {
  setup() {
    const count = ref<number>(0)  // Explicit type
    
    return {
      count,
      increment: () => count.value++  // Automatically infers return type
    }
  }
}

Logic Reusability

The Composition API achieves true logic reuse through composable functions, which is difficult to accomplish with mixins and HOCs:

// Encapsulating reusable logic
function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  function increment() {
    count.value++
  }
  
  return {
    count,
    increment
  }
}

// Using in a component
export default {
  setup() {
    const { count, increment } = useCounter()
    
    return {
      count,
      increment
    }
  }
}

Core of the Reactive System

The Composition API is deeply integrated with Vue 3's reactive system, with ref and reactive as its foundation:

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

export default {
  setup() {
    const state = reactive({
      firstName: '张',
      lastName: '三'
    })
    
    const fullName = computed(() => `${state.firstName}${state.lastName}`)
    
    const age = ref(30)
    
    return {
      state,
      fullName,
      age
    }
  }
}

Consolidation of Lifecycle Hooks

The Composition API unifies lifecycle hooks into function forms, allowing for more flexible organization:

import { onMounted, onUpdated } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted')
    })
    
    onUpdated(() => {
      console.log('Component updated')
    })
    
    // The same lifecycle can be called multiple times
    onMounted(() => {
      console.log('Another mount logic')
    })
  }
}

Interoperability with the Options API

The Composition API can coexist with the Options API, facilitating gradual migration:

export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  
  mounted() {
    console.log('Traditional Options API lifecycle')
  },
  
  methods: {
    traditionalMethod() {
      console.log('Traditional method')
    }
  }
}

Performance Optimization Potential

The Composition API provides more possibilities for compiler optimizations, such as more precise dependency tracking:

import { computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      a: 1,
      b: 2,
      c: 3
    })
    
    // Only recomputes when state.a changes
    const computedA = computed(() => state.a * 2)
    
    return {
      computedA
    }
  }
}

Better Code Organization Patterns

The Composition API encourages breaking down complex logic into multiple composable functions:

function useUser() {
  const user = ref(null)
  // User-related logic...
  return { user }
}

function usePosts() {
  const posts = ref([])
  // Posts-related logic...
  return { posts }
}

export default {
  setup() {
    const { user } = useUser()
    const { posts } = usePosts()
    
    return {
      user,
      posts
    }
  }
}

Decoupling from the Rendering Context

The Composition API can be used outside components, providing convenience for testing and reuse:

// Defining logic outside components
function useFeature() {
  const value = ref(0)
  // Logic code...
  return { value }
}

// Can be called directly during testing
test('useFeature', () => {
  const { value } = useFeature()
  // Test logic...
})

// Using in a component
export default {
  setup() {
    return useFeature()
  }
}

Rich Reactive Utility Functions

The Composition API provides a series of reactive utility functions, enhancing the development experience:

import { toRefs, isRef, unref } from 'vue'

export default {
  setup() {
    const state = reactive({
      foo: 1,
      bar: 2
    })
    
    // Destructuring while maintaining reactivity
    const { foo, bar } = toRefs(state)
    
    // Checking if it's a ref
    console.log(isRef(foo)) // true
    
    // Safely getting the value
    const value = unref(maybeRef)
    
    return {
      foo,
      bar
    }
  }
}

Deep Integration with Templates

Values returned by the Composition API can be used directly in templates, maintaining a consistent development experience:

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    function increment() {
      count.value++
    }
    
    return {
      count,
      increment
    }
  }
}
</script>

Reactive State Management

The Composition API simplifies state management, making it easy to create reusable stores:

// store.js
import { reactive } from 'vue'

export const store = reactive({
  count: 0,
  increment() {
    this.count++
  }
})

// Using in a component
import { store } from './store'

export default {
  setup() {
    return {
      store
    }
  }
}

Asynchronous Logic Handling

The Composition API provides a more elegant way to handle asynchronous operations:

import { ref } from 'vue'
import { fetchUser } from './api'

export default {
  async setup() {
    const user = ref(null)
    const loading = ref(false)
    
    loading.value = true
    user.value = await fetchUser()
    loading.value = false
    
    return {
      user,
      loading
    }
  }
}

Dependency Injection System

The Composition API improves the dependency injection mechanism, making it more type-safe:

import { provide, inject } from 'vue'

// Provider component
export default {
  setup() {
    provide('theme', 'dark')
  }
}

// Consumer component
export default {
  setup() {
    const theme = inject<string>('theme', 'light') // Default value 'light'
    return { theme }
  }
}

Rise of Custom Hooks

The Composition API has spurred a rich ecosystem of custom hooks:

// useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)
  
  function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }
  
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  
  return { x, y }
}

// Using in a component
export default {
  setup() {
    const { x, y } = useMousePosition()
    return { x, y }
  }
}

Reactive Programming Paradigm

The Composition API encourages a more declarative programming style:

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    // Automatically tracks dependencies
    watchEffect(() => {
      console.log(`count is: ${count.value}`)
    })
    
    return {
      count
    }
  }
}

Synergy with JSX

The Composition API works exceptionally well with JSX:

import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)
    
    return () => (
      <div>
        <button onClick={() => count.value++}>
          Count is: {count.value}
        </button>
      </div>
    )
  }
})

Compile-Time Optimization Support

The Composition API lays the foundation for Vue 3's compiler optimizations:

import { ref } from 'vue'

export default {
  setup() {
    // The compiler can statically analyze these references
    const count = ref(0)
    const double = computed(() => count.value * 2)
    
    return {
      count,
      double
    }
  }
}

Cross-Component Communication Patterns

The Composition API provides new ways for cross-component communication:

// Parent component
import { provide, ref } from 'vue'

export default {
  setup() {
    const sharedState = ref('initial value')
    provide('shared-key', sharedState)
  }
}

// Child component
import { inject } from 'vue'

export default {
  setup() {
    const sharedState = inject('shared-key')
    return { sharedState }
  }
}

Reactive Collection Operations

The Composition API simplifies collection operations:

import { reactive } from 'vue'

export default {
  setup() {
    const list = reactive([1, 2, 3])
    
    function addItem() {
      list.push(list.length + 1)
    }
    
    return {
      list,
      addItem
    }
  }
}

Dynamic Components and the Composition API

The Composition API works well with dynamic components:

<template>
  <component :is="currentComponent" />
</template>

<script>
import { shallowRef } from 'vue'
import CompA from './CompA.vue'
import CompB from './CompB.vue'

export default {
  setup() {
    const currentComponent = shallowRef(CompA)
    
    function toggle() {
      currentComponent.value = 
        currentComponent.value === CompA ? CompB : CompA
    }
    
    return {
      currentComponent,
      toggle
    }
  }
}
</script>

Reactive CSS Variables

The Composition API makes it easy to manage CSS variables:

<template>
  <div :style="style">Content</div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const style = reactive({
      '--primary-color': '#42b983',
      '--text-size': '16px'
    })
    
    return {
      style
    }
  }
}
</script>

Form Handling Patterns

The Composition API simplifies form handling:

import { reactive } from 'vue'

export default {
  setup() {
    const form = reactive({
      username: '',
      password: ''
    })
    
    const errors = reactive({})
    
    function validate() {
      // Validation logic...
    }
    
    return {
      form,
      errors,
      validate
    }
  }
}

Router Integration

The Composition API integrates deeply with Vue Router:

import { useRoute, useRouter } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()
    
    function navigate() {
      router.push('/new-path')
    }
    
    return {
      route,
      navigate
    }
  }
}

State Persistence

The Composition API makes it easy to implement state persistence:

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(
      Number(localStorage.getItem('count')) || 0
    )
    
    watch(count, (newVal) => {
      localStorage.setItem('count', newVal)
    })
    
    return {
      count
    }
  }
}

Animation Control

The Composition API provides more flexible animation control:

import { ref } from 'vue'
import { gsap } from 'gsap'

export default {
  setup() {
    const el = ref(null)
    
    onMounted(() => {
      gsap.to(el.value, { x: 100, duration: 1 })
    })
    
    return {
      el
    }
  }
}

Server-Side Rendering Support

The Composition API performs well in SSR scenarios:

import { ref, onServerPrefetch } from 'vue'
import { fetchData } from './api'

export default {
  async setup() {
    const data = ref(null)
    
    onServerPrefetch(async () => {
      data.value = await fetchData()
    })
    
    // Also executes on the client
    if (!data.value) {
      data.value = await fetchData()
    }
    
    return {
      data
    }
  }
}

DevTools Integration

The Composition API integrates deeply with Vue DevTools:

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      // These properties will appear in DevTools
      debugValue: 'Debug info',
      nested: {
        value: 'Nested value'
      }
    })
    
    return {
      state
    }
  }
}

Performance Monitoring

The Composition API makes it easy to add performance monitoring:

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      performance.mark('component-mounted')
      // Performance monitoring logic...
    })
  }
}

Error Handling Mechanism

The Composition API provides better error handling:

import { onErrorCaptured } from 'vue'

export default {
  setup() {
    onErrorCaptured((err) => {
      console.error('Component error:', err)
      // Return false to prevent the error from propagating further
      return false
    })
  }
}

Reactive Transformations

The Composition API provides reactive transformation tools:

import { toRef, isReactive } from 'vue'

export default {
  setup() {
    const obj = { a: 1 }
    const reactiveObj = reactive(obj)
    
    console.log(isReactive(reactiveObj)) // true
    
    // Convert a reactive object's property to a ref
    const aRef = toRef(reactiveObj, 'a')
    
    return {
      aRef
    }
  }
}

Component Metadata

The Composition API makes it easy to manage component metadata:

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MyComponent',
  setup() {
    // Component logic...
  }
})

Reactive Toolchain

The Composition API builds a complete reactive toolchain:

import { 
  markRaw,
  shallowReactive,
  shallowReadonly,
  customRef
} from 'vue'

export default {
  setup() {
    // Mark an object as non-reactive
    const rawObj = markRaw({ shouldNotBeReactive: true })
    
    // Shallow reactive
    const shallowState = shallowReactive({ nested: { a: 1 } })
    
    // Custom ref implementation
    function useDebouncedRef(value, delay = 200) {
      return customRef((track, trigger) => {
        let timeout
        return {
          get() {
            track()
            return value
          },
          set(newValue) {
            clearTimeout(timeout)
            timeout = setTimeout(() => {
              value = newValue
              trigger()
            }, delay)
          }
        }
      })
    }
    
    return {
      rawObj,
      shallowState,
      debouncedValue: useDebouncedRef('')
    }
  }
}