什么是 Composition API？

Composition API 是 Vue 3 引入的一种新的组件逻辑组织方式，它允许我们根据逻辑功能来组织代码，而不是按照选项类型。

为什么使用 Composition API？

1. 更好的逻辑复用：通过组合函数可以轻松复用组件逻辑
2. 更灵活的代码组织：根据功能组织代码，提高可读性和可维护性
3. 更好的类型推导：对 TypeScript 支持更友好
4. 更小的生产包体积：按需引入，减少打包体积

基本使用

setup 函数

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">点击次数: {{ count }}</button>
  </div>
</template>

<script lang="ts">
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const title = ref('Composition API 示例')
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    onMounted(() => {
      console.log('组件挂载完成')
    })

    return {
      title,
      count,
      increment
    }
  }
}
</script>

组合函数

// useCounter.ts
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const doubleCount = computed(() => count.value * 2)

  const increment = () => {
    count.value++
  }

  const decrement = () => {
    count.value--
  }

  return {
    count,
    doubleCount,
    increment,
    decrement
  }
}

总结

Composition API 为 Vue 开发者提供了一种更灵活、更强大的方式来组织组件逻辑。它特别适合大型应用和需要复杂逻辑复用的场景。

通过学习和使用 Composition API，我们可以编写更清晰、更可维护的 Vue 组件代码。