Vue 3 Composition API 实践指南

Vue 3 的 Composition API 是一个革命性的特性，它为我们提供了更好的代码组织方式和逻辑复用能力。本文将深入探讨如何有效地使用这一特性。

为什么选择 Composition API？

相比于 Options API，Composition API 提供了以下优势：

• 更好的代码组织
• 更强的类型推导
• 更方便的逻辑复用

基础用法

import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    // 响应式状态
    const count = ref(0)
    
    // 计算属性
    const doubleCount = computed(() => count.value * 2)
    
    // 方法
    const increment = () => {
      count.value++
    }
    
    // 生命周期钩子
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    // 返回给模板使用
    return {
      count,
      doubleCount,
      increment
    }
  }
}

最佳实践

1. 使用组合式函数（Composables）抽取可复用逻辑
2. 保持 setup 函数简洁
3. 使用 TypeScript 获得更好的类型支持

实际案例

让我们来看一个实际的例子：一个带有搜索和筛选功能的用户列表。

<script setup>
import { ref, computed } from 'vue'
import { useUsers } from '@/composables/users'

const { users, loading } = useUsers()
const searchQuery = ref('')

const filteredUsers = computed(() => {
  return users.value.filter(user => 
    user.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})
</script>

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索用户...">
    <div v-if="loading">加载中...</div>
    <ul v-else>
      <li v-for="user in filteredUsers" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

结论

Composition API 不仅提供了更好的代码组织方式，还能帮助我们写出更易维护和复用的代码。通过合理使用组合式函数，我们可以构建出更加清晰和可扩展的应用程序。