Vue3中Composition API怎么用

# Vue3中Composition API怎么用

## 引言

隨著Vue3的正式發布，Composition API作為其最核心的新特性之一，徹底改變了我們組織和復用組件邏輯的方式。與Vue2的Options API相比，Composition API提供了更靈活的代碼組織能力、更好的類型推斷支持以及更高效的邏輯復用機制。本文將全面解析Composition API的使用方法，從基礎概念到高級技巧，幫助開發者掌握這一現代化前端開發利器。

## 一、Composition API概述

### 1.1 什么是Composition API

Composition API是Vue3引入的一套新的API風格，它允許開發者通過函數式的方式組織和復用組件邏輯。與Options API（如data、methods等選項）不同，Composition API基于"組合"的思想，將相關邏輯集中在一起。

```javascript
// Options API示例
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

// Composition API示例
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    
    return { count, increment }
  }
}

1.2 為什么需要Composition API

1. 更好的邏輯組織：相關代碼可以集中在一起，而不是分散在不同選項中
2. 更靈活的邏輯復用：通過自定義hook函數實現邏輯復用
3. 更好的TypeScript支持：類型推斷更加自然和準確
4. 更小的生產包體積：基于函數的API可以更好地進行Tree-shaking

1.3 Composition API與Options API的關系

• 并非替代關系，而是補充關系
• 可以共存于同一個組件中
• 根據場景選擇合適的API風格
• 復雜組件更適合使用Composition API

二、setup函數詳解

2.1 setup函數的基本用法

setup是Composition API的入口函數，它在組件實例創建之前執行。

export default {
  setup(props, context) {
    // 在這里聲明響應式數據、計算屬性、方法等
    return {
      // 返回的內容可以在模板中使用
    }
  }
}

2.2 setup函數的參數

1. props：組件接收的props，是響應式的
2. context：包含三個重要屬性
   • attrs：非props的屬性
   • slots：插槽內容
   • emit：觸發事件的方法

setup(props, { attrs, slots, emit }) {
  // 使用emit觸發事件
  const handleClick = () => {
    emit('custom-event', payload)
  }
  
  return { handleClick }
}

2.3 setup函數的返回值

• 返回一個對象，對象的屬性可以在模板中直接使用
• 可以返回響應式數據、方法、計算屬性等
• 也可以返回渲染函數（JSX）

setup() {
  const count = ref(0)
  
  return {
    count,
    double: computed(() => count.value * 2)
  }
}

三、響應式系統核心

3.1 ref與reactive

Vue3提供了兩種創建響應式數據的主要方式：

1. ref：適用于基本類型和對象
   • 通過.value訪問值
   • 模板中自動解包

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

1. reactive：只適用于對象
   • 直接訪問屬性
   • 解構會失去響應性

const state = reactive({ count: 0 })
console.log(state.count) // 0

3.2 響應式工具函數

Vue3提供了一系列響應式工具函數：

1. isRef：檢查是否為ref對象
2. unref：如果是ref則返回其值，否則返回本身
3. toRef：為響應式對象的屬性創建ref
4. toRefs：將響應式對象轉換為普通對象，但屬性保持響應式

const state = reactive({ foo: 1, bar: 2 })
const { foo, bar } = toRefs(state) // 解構后保持響應性

3.3 計算屬性與偵聽器

1. computed：創建計算屬性

   
   const double = computed(() => count.value * 2)
   

2. watch：偵聽單個數據源

   
   watch(count, (newVal, oldVal) => {
    console.log(`count變化: ${oldVal} -> ${newVal}`)
   })
   

3. watchEffect：立即執行并自動追蹤依賴

   
   watchEffect(() => {
    console.log(`count的值是: ${count.value}`)
   })
   

四、生命周期鉤子

Composition API提供了一組與生命周期對應的函數：

import { onMounted, onUnmounted } from 'vue'

setup() {
  onMounted(() => {
    console.log('組件已掛載')
  })
  
  onUnmounted(() => {
    console.log('組件已卸載')
  })
}

五、依賴注入

Composition API提供了provide和inject函數實現依賴注入：

// 祖先組件
import { provide, ref } from 'vue'

setup() {
  const theme = ref('dark')
  provide('theme', theme)
}

// 后代組件
import { inject } from 'vue'

setup() {
  const theme = inject('theme', 'light') // 默認值'light'
  return { theme }
}

六、邏輯復用與自定義Hook

Composition API最大的優勢之一是能夠輕松地提取和復用邏輯：

6.1 創建自定義Hook

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

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

// 在組件中使用
import { useCounter } from './useCounter'

setup() {
  const { count, increment } = useCounter(10)
  return { count, increment }
}

6.2 常見自定義Hook示例

1. useFetch：封裝數據請求邏輯
2. useMousePosition：跟蹤鼠標位置
3. useLocalStorage：與localStorage交互
4. useDarkMode：管理暗黑模式狀態

七、與TypeScript集成

Composition API天生對TypeScript友好：

7.1 類型定義props

interface Props {
  msg: string
  count?: number
}

export default defineComponent({
  props: {
    msg: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  },
  setup(props: Props) {
    // 現在props有正確的類型提示
  }
})

7.2 類型定義響應式數據

interface User {
  name: string
  age: number
}

const user = ref<User>({ name: 'Alice', age: 25 })

八、最佳實踐與常見問題

8.1 代碼組織建議

1. 按功能而非選項類型組織代碼
2. 將相關邏輯放在一起
3. 復雜邏輯提取到自定義Hook中
4. 使用命名約定（如use前綴）標識自定義Hook

8.2 常見問題解決方案

1. 響應式丟失：使用toRefs解構reactive對象
2. 無限循環：避免在watch回調中修改被偵聽的數據
3. 內存泄漏：在onUnmounted中清理副作用
4. 性能優化：合理使用computed和watch

九、實戰案例：構建一個Todo應用

import { ref, computed } from 'vue'

export default {
  setup() {
    const newTodo = ref('')
    const todos = ref([])
    const filter = ref('all')
    
    const addTodo = () => {
      if (newTodo.value.trim()) {
        todos.value.push({
          id: Date.now(),
          text: newTodo.value,
          completed: false
        })
        newTodo.value = ''
      }
    }
    
    const filteredTodos = computed(() => {
      switch (filter.value) {
        case 'active': return todos.value.filter(t => !t.completed)
        case 'completed': return todos.value.filter(t => t.completed)
        default: return todos.value
      }
    })
    
    return { newTodo, todos, filter, addTodo, filteredTodos }
  }
}

十、總結

Composition API代表了Vue框架的一次重大進化，它解決了Options API在復雜組件中面臨的代碼組織難題，同時提供了更強大的邏輯復用能力。通過本文的學習，你應該已經掌握了：

1. setup函數的基本用法和核心概念
2. 響應式系統的核心API（ref、reactive等）
3. 生命周期鉤子的對應關系和使用方法
4. 如何通過自定義Hook實現邏輯復用
5. 與TypeScript集成的技巧
6. 實際開發中的最佳實踐

雖然Composition API有一定的學習曲線，但一旦掌握，它將顯著提升你的開發效率和代碼質量。建議在實際項目中逐步嘗試，從簡單組件開始，逐步應用到更復雜的場景中。

附錄：資源推薦

1. Vue3官方文檔
2. Vue Composition API RFC
3. VueUse - 實用的Composition API工具集合
4. Vue3 + TypeScript Cheat Sheet

”`

這篇文章共計約4900字，全面介紹了Vue3 Composition API的核心概念和使用方法，從基礎到高級，包含了大量代碼示例和實用建議。文章采用Markdown格式，結構清晰，便于閱讀和理解。