Vue 3 的 Composition API 提供了更灵活的组件逻辑组织方式。本文通过一个完整的项目案例，展示如何使用 Composition API 构建可维护的 Vue 应用。

什么是 Composition API?

Composition API 是 Vue 3 中引入的一组 API，它允许我们使用函数的方式组织和重用组件逻辑。与 Options API 相比，Composition API 提供了更好的逻辑复用性和代码组织性。

为什么使用 Composition API?

在 Vue 2 的 Options API 中，随着组件功能的增加，代码会变得越来越复杂，逻辑分散在 data、methods、computed 等选项中，难以维护。Composition API 通过将相关逻辑组织在一起，解决了这个问题。

基础用法

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello Vue 3!')
    
    const updateMessage = () => {
      message.value = 'Message Updated!'
    }
    
    return {
      message,
      updateMessage
    }
  }
}
</script>

响应式数据

Vue 3 提供了 reactive 和 ref 两种方式来创建响应式数据。reactive 用于创建响应式对象，ref 用于创建响应式的基本类型值。

计算属性和监听器

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

export default {
  setup() {
    const count = ref(0)
    const doubledCount = computed(() => count.value * 2)
    
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`)
    })
    
    return {
      count,
      doubledCount
    }
  }
}
</script>

生命周期钩子

Composition API 中的生命周期钩子与 Options API 中的钩子相对应，但名称前加上了 on 前缀。

<script>
import { onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted!')
    })
    
    onUpdated(() => {
      console.log('Component is updated!')
    })
    
    onUnmounted(() => {
      console.log('Component is unmounted!')
    })
  }
}
</script>

自定义 Hook

通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。

// useCounter.js
import { ref } from 'vue'

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

在组件中使用自定义 Hook

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment, decrement } = useCounter()
    
    return {
      count,
      increment,
      decrement
    }
  }
}
</script>

结论

Composition API 为 Vue 3 带来了更灵活和强大的功能，使得组件逻辑的组织和复用变得更加容易。通过合理使用 Composition API，我们可以写出更简洁、更易于维护的代码。