组合式 API

组合式 API (Composition API) 是 Vue 3 引入的一套新的 API，它提供了一种更灵活的方式来组织组件逻辑。

什么是组合式 API？

组合式 API 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API：

• 响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。
• 生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。
• 依赖注入：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。

基本示例

这里是使用组合式 API 与单文件组件语法的基本示例：

<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 is: {{ count }}</button>
</template>

为什么要有组合式 API？

更好的逻辑复用

组合式 API 最基本的优势是它使我们能够通过组合函数来实现更加简洁高效的逻辑复用。

// composables/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
  }
}

<script setup>
import { useCounter } from './composables/useCounter.js'

const { count, increment, decrement } = useCounter()
</script>

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

更灵活的代码组织

在复杂组件中，组合式 API 使我们能够将相关的代码片段组合在一起：

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

// 用户相关功能
const user = ref(null)
const isLoggedIn = computed(() => !!user.value)

function login() {
  // 登录逻辑
}

function logout() {
  // 登出逻辑
}

// 搜索相关功能
const searchQuery = ref('')
const searchResults = ref([])

function search() {
  // 搜索逻辑
}

// 生命周期
onMounted(() => {
  // 初始化逻辑
})
</script>

更好的 TypeScript 支持

组合式 API 主要利用基本的变量和函数，它们本身就是类型友好的。用组合式 API 重构的代码可以享受到完整的类型推导，不需要太多手动的类型标注。

响应式基础

ref()

ref() 接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

import { ref } from 'vue'

const count = ref(0)

console.log(count.value) // 0

count.value++
console.log(count.value) // 1

reactive()

reactive() 返回一个对象的响应式代理。

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'Vue'
})

state.count++
console.log(state.count) // 1

computed()

computed() 接受一个 getter 函数，返回一个只读的响应式 ref 对象。

import { ref, computed } from 'vue'

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

console.log(plusOne.value) // 2

count.value++
console.log(plusOne.value) // 3

生命周期钩子

你可以通过在生命周期钩子前面加上 "on" 来访问组件的生命周期钩子。

import { onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    onUpdated(() => {
      console.log('组件已更新')
    })
    
    onUnmounted(() => {
      console.log('组件将卸载')
    })
  }
}

侦听器

watch()

watch() 函数用来侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newCount, oldCount) => {
  console.log(`count 从 ${oldCount} 变为 ${newCount}`)
})

watchEffect()

watchEffect() 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

import { ref, watchEffect } from 'vue'

const count = ref(0)

watchEffect(() => {
  console.log(`count 是: ${count.value}`)
})
// -> 输出 "count 是: 0"

count.value++
// -> 输出 "count 是: 1"

下一步

现在你已经了解了组合式 API 的基础知识，继续学习：

• 响应式原理
• 渲染函数
• 插件开发

组合式 API 为 Vue 开发带来了更多的可能性，让我们继续探索吧！