Vue 组合式 API

组合式 API (Composition API) 是 Vue 3 中引入的一套新的、函数式的 API。它旨在解决 Vue 2 中选项式 API (Options API) 在大型应用中遇到的一些问题，例如逻辑分散、难以复用等。组合式 API 允许我们更灵活地组织和复用组件逻辑。

什么是组合式 API？

组合式 API 的核心思想是将与同一个逻辑功能相关的代码（如状态、方法、计算属性、监听器等）组织在一起，而不是按照选项（data, methods, computed）来拆分它们。

这种方式使得代码更易于阅读和维护，尤其是在组件变得复杂时。它还使得逻辑复用变得非常简单和直观。

`setup` 函数

组合式 API 的入口点是 setup 函数。在 Vue 3 的单文件组件中，我们通常直接使用 <script setup> 语法，它本质上是 setup 函数的语法糖。

vue

<script setup>
// 所有在这里编写的代码都在 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>

在 <script setup> 中：

所有顶级绑定（变量、函数声明）都会自动暴露给模板。
我们可以直接使用从 vue 中导入的 API，如 ref, reactive, computed, watch, 以及生命周期钩子。

核心 API 概览

`ref` 和 `reactive`

用于创建响应式数据。

ref(): 接收一个内部值，返回一个响应式的、可变的 ref 对象。这个对象有一个 .value 属性，指向内部值。通常用于创建基本类型（字符串、数字、布尔值）的响应式变量。
reactive(): 返回一个对象的响应式代理。它会“深度”地转换对象，所有嵌套的 property 都是响应式的。通常用于创建响应式对象。

import { ref, reactive } from 'vue'

const count = ref(0) // ref for primitives
console.log(count.value) // 0

const state = reactive({ // reactive for objects
  user: 'John Doe',
  posts: []
})
console.log(state.user)

`computed`

用于创建计算属性。它接收一个 getter 函数，并返回一个不可变的响应式 ref 对象。

import { ref, computed } from 'vue'

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 错误！计算属性是只读的

`watch` 和 `watchEffect`

用于在数据变化时执行副作用。

watch: 精确地监听一个或多个数据源，并在它们变化时执行回调。它是惰性的，并可以访问新旧值。
watchEffect: 立即执行一个函数，并响应式地追踪其依赖，在依赖变更时重新运行。

生命周期钩子

组合式 API 提供了一系列与组件生命周期事件相对应的函数，如 onMounted, onUpdated, onUnmounted 等。它们接收一个回调函数，在组件的相应生命周期阶段被调用。

import { onMounted } from 'vue'

onMounted(() => {
  console.log('Component is mounted!')
})

优势总结

更好的逻辑组织：可以将相关功能的代码放在一起，而不是被迫按选项分割。
更好的类型推断：组合式 API 主要使用普通变量和函数，对 TypeScript 非常友好。
更灵活的逻辑复用：可以轻松地将任何逻辑（状态、方法等）提取到可复用的“组合式函数”(Composables) 中，并在多个组件中使用。

Vue 组合式 API ​

什么是组合式 API？ ​

setup 函数 ​

核心 API 概览 ​

ref 和 reactive ​

computed ​

watch 和 watchEffect ​

生命周期钩子 ​

优势总结 ​