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提供了一组与生命周期对应的函数：

Options API	Composition API
beforeCreate	不需要（setup替代）
created	不需要（setup替代）
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered

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格式，结构清晰，便于阅读和理解。