Vue3 组合式 API
关键要点
- Vue3 组合式 API 是一种新的组件逻辑编写方式，研究表明它提高了代码的可复用性和组织性。
- 它通过
setup()函数作为入口，支持响应式 API（如ref()、reactive()）和生命周期钩子（如onMounted()）。 - 组合式 API 似乎更适合大型项目，提供更好的 TypeScript 支持和更小的生产包大小。
- 它与 Options API 可以混合使用，但官方推荐新项目优先使用组合式 API。
什么是组合式 API？
Vue3 组合式 API 是一种基于函数的 API，允许开发者按逻辑关注点组织代码。它通过 setup() 函数作为入口，适合处理复杂组件的逻辑。研究表明，它解决了传统 Options API 中代码分散和混入（mixins）复用问题的缺陷。
如何使用？
在单文件组件中，可以使用 <script setup> 简化使用。例如，一个计数器组件：
<script setup>
import { ref, onMounted } from 'vue'
const count = ref(0)
function increment() { count.value++ }
onMounted(() => console.log(`初始计数为 ${count.value}`))
</script>
<template>
<button @click="increment">计数：{{ count }}</button>
</template>这里，ref() 创建响应式变量，onMounted() 是生命周期钩子。
为什么选择它？
- 证据显示，它提供了更好的代码复用能力，通过组合函数（Composables）实现逻辑共享。
- 它似乎更适合大型项目，提供灵活的代码组织和更好的 TypeScript 类型推导。
- 使用
<script setup>时，生产包大小可能更小，编译器会内联函数。
详细报告
Vue3 组合式 API（Composition API）是一种新的编写组件逻辑的方式，旨在提高大型组件的代码可复用性和组织性。它通过函数式编程的理念，允许开发者将组件逻辑按关注点分组并复用，解决了传统 Options API 中代码组织和复用方面的局限性。以下是对 Vue3 组合式 API 的全面讲解，涵盖其定义、使用方式、优势、关键特性以及实际应用。
背景与定义
Vue3 组合式 API 是一种基于函数的 API，用于编写 Vue 组件的逻辑。它主要解决了以下问题：
- 代码组织：在传统的 Options API 中，组件逻辑被分散在多个选项（如
data、methods、computed）中，随着组件复杂度的增加，代码变得难以阅读和维护。 - 代码复用：Options API 中的混入（mixins）虽然提供了复用机制，但容易导致“混入地狱”，即多个混入之间的逻辑冲突和难以追踪。
- TypeScript 支持：组合式 API 提供了更好的类型推导，减少了手动类型注解的需求。
组合式 API 的核心思想是通过函数组合（Composables）来组织和复用逻辑，使得开发者可以更灵活地管理组件的状态和行为。
使用方式
组合式 API 的主要入口是 setup() 函数，它在组件的生命周期中被调用，通常用于定义组件的逻辑。以下是一个简单的计数器示例：
<script setup>
import { ref, onMounted } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>ref()：创建一个响应式引用，用于存储单个值（如count）。onMounted()：生命周期钩子，用于在组件挂载后执行逻辑。setup()：在单文件组件中，可以使用<script setup>语法简化setup()函数的使用。
优势
与 Options API 相比，组合式 API 具有以下优势：
- 更好的代码复用：通过组合函数（Composables），开发者可以创建可复用的逻辑片段。例如，
useCounter函数可以被多个组件共享：
function useCounter() {
const count = ref(0)
function increment() {
count.value++
}
return { count, increment }
}在组件中使用：
<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>- 更灵活的代码组织：开发者可以按逻辑关注点组织代码，而不是受限于固定的选项。
- 更好的 TypeScript 支持：组合式 API 提供了更好的类型推导，减少了手动类型注解的需求。
- 更小的生产包大小：使用
<script setup>时，编译器可以内联函数，减少了包大小。
关键特性
响应式 API
组合式 API 提供了以下响应式工具：
ref()：创建单个响应式变量（如const count = ref(0)）。reactive()：创建响应式对象（如const state = reactive({ count: 0, name: 'John' })）。computed()：创建计算属性（如const doubleCount = computed(() => count.value * 2)）。
生命周期钩子
组合式 API 提供了与 Options API 对应的生命周期钩子，但使用 on 前缀的函数：
onBeforeMountonMountedonBeforeUpdateonUpdatedonBeforeUnmountonUnmountedonErrorCaptured
以下是 Options API 与 Composition API 生命周期钩子的映射表：
| Vue2 Options-based API | Vue Composition API |
|---|---|
| beforeCreate | setup() |
| created | setup() |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| errorCaptured | onErrorCaptured |
模板引用
在组合式 API 中，模板引用（ref）可以使用 ref() 函数来创建，并在 setup() 中使用。例如：
<script setup>
import { ref, onMounted } from 'vue'
const root = ref(null)
onMounted(() => {
console.log(root.value)
})
</script>
<template>
<div ref="root">Hello</div>
</template>自定义组合式 API
开发者可以创建自定义的组合式函数（Composables），例如：
function useTimer() {
const time = ref(0)
const interval = setInterval(() => {
time.value++
}, 1000)
onUnmounted(() => clearInterval(interval))
return time
}然后在组件中使用：
<script setup>
import { useTimer } from './useTimer'
const time = useTimer()
</script>
<template>
<div>Time: {{ time }}</div>
</template>组件通信
组合式 API 支持 provide() 和 inject() 用于组件之间的数据共享：
- 父组件：
<script setup>
import { provide } from 'vue'
const state = reactive({ count: 0 })
provide('state', state)
</script>- 子组件：
<script setup>
import { inject } from 'vue'
const state = inject('state')
</script>与 Options API 的关系
- 混合使用：可以在同一个组件中同时使用组合式 API 和 Options API，但不推荐。组合式 API 应优先用于新项目。
- 迁移：对于旧的 Options API 项目，可以逐步迁移到组合式 API。
- 选择：对于小型项目，Options API 仍然适用；对于大型项目，组合式 API 更适合。
实际应用与实践
组合式 API 特别适合以下场景：
- 大型项目：当组件逻辑复杂时，组合式 API 允许按功能分组代码，易于维护。
- 逻辑复用：通过自定义组合式函数（如
useCounter、useTimer），可以在多个组件中共享逻辑。 - TypeScript 项目：组合式 API 的类型推导能力更强，适合 TypeScript 开发。
注意事项
- 异步 setup：只有在组件是 Suspense 的后代时，
setup()才支持异步。 - props 的响应性：
setup()的第一个参数是props，它是响应式的，更新时会触发组件重新渲染。避免解构props以保持响应性。 - 无
this访问：在setup()中，this是undefined，不能访问组件实例。
总结
Vue3 组合式 API 是一种强大的工具，允许开发者以更灵活、更可复用和更易维护的方式编写组件逻辑。它是 Vue3 的重要特性之一，值得深入学习和掌握。通过组合式 API，开发者可以更好地组织代码、提高复用性，并享受更好的 TypeScript 支持。