Vue 3 Composition API 实战指南：从Options到Composition的平滑迁移-IJ笔记

Vue 3 Composition API 实战指南：从Options到Composition的平滑迁移

Vue 3的Composition API是Vue生态系统中最重要的革新之一。它提供了一种更灵活、更可组合的方式来组织组件逻辑，特别适合大型应用和复杂组件。本文将带你从Options API平滑过渡到Composition API，并通过实际示例展示其强大功能。

1. Composition API 基础概念

Composition API的核心思想是将相关的逻辑组织在一起，而不是按照选项（data、methods、computed等）分散在组件中。让我们先看一个简单的计数器组件：

// Options API 写法
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  }
}

使用Composition API重写：

// Composition API 写法
import { ref, computed } from "vue"

export default {
  setup() {
    // 响应式数据
    const count = ref(0)
    
    // 方法
    const increment = () => {
      count.value++
    }
    
    // 计算属性
    const doubleCount = computed(() => count.value * 2)
    
    // 返回模板中需要使用的数据和方法
    return {
      count,
      increment,
      doubleCount
    }
  }
}

2. 逻辑复用：自定义组合函数

Composition API最大的优势之一是逻辑复用。我们可以将相关的逻辑提取到自定义组合函数中：

// useCounter.js - 自定义组合函数
export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const increment = () => {
    count.value++
  }
  
  const decrement = () => {
    count.value--
  }
  
  const reset = () => {
    count.value = initialValue
  }
  
  const doubleCount = computed(() => count.value * 2)
  
  return {
    count,
    increment,
    decrement,
    reset,
    doubleCount
  }
}

// 在组件中使用
import { useCounter } from "./useCounter"

export default {
  setup() {
    const counter = useCounter(10)
    
    return {
      ...counter
    }
  }
}

3. 生命周期钩子的变化

在Composition API中，生命周期钩子有对应的函数：

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

export default {
  setup() {
    // 组件挂载后执行
    onMounted(() => {
      console.log("组件已挂载")
      // 初始化操作，如获取数据
    })
    
    // 组件更新后执行
    onUpdated(() => {
      console.log("组件已更新")
    })
    
    // 组件卸载前执行
    onUnmounted(() => {
      console.log("组件即将卸载")
      // 清理操作，如取消事件监听
    })
    
    // 其他生命周期钩子：
    // onBeforeMount, onBeforeUpdate, onBeforeUnmount, onErrorCaptured
  }
}

4. 响应式工具函数

Vue 3提供了丰富的响应式工具函数：

import { reactive, toRefs, watch, watchEffect } from "vue"

export default {
  setup() {
    // reactive 创建响应式对象
    const state = reactive({
      name: "张三",
      age: 25,
      address: {
        city: "北京",
        street: "中关村"
      }
    })
    
    // toRefs 将reactive对象转换为ref对象
    // 便于在模板中解构使用
    const { name, age } = toRefs(state)
    
    // watch 监听单个数据源
    watch(
      () => state.age,
      (newAge, oldAge) => {
        console.log(`年龄从 ${oldAge} 变为 ${newAge}`)
      }
    )
    
    // watchEffect 自动追踪依赖
    watchEffect(() => {
      console.log(`姓名: ${state.name}, 年龄: ${state.age}`)
    })
    
    return {
      state,
      name,
      age
    }
  }
}

5. 实际应用：用户搜索组件

让我们创建一个实际的用户搜索组件，展示Composition API在实际项目中的应用：

// useUserSearch.js
export function useUserSearch() {
  const searchQuery = ref("")
  const users = ref([])
  const isLoading = ref(false)
  const error = ref(null)
  
  // 防抖搜索
  const debouncedSearch = useDebounce(searchQuery, 500)
  
  // 监听搜索词变化
  watch(debouncedSearch, async (newQuery) => {
    if (!newQuery.trim()) {
      users.value = []
      return
    }
    
    try {
      isLoading.value = true
      error.value = null
      
      const response = await fetch(`/api/users?q=${encodeURIComponent(newQuery)}`)
      const data = await response.json()
      
      users.value = data.users
    } catch (err) {
      error.value = err.message
      users.value = []
    } finally {
      isLoading.value = false
    }
  }, { immediate: true })
  
  return {
    searchQuery,
    users,
    isLoading,
    error
  }
}

// 在组件中使用
import { useUserSearch } from "./useUserSearch"

export default {
  setup() {
    const userSearch = useUserSearch()
    
    return {
      ...userSearch
    }
  }
}