Vue 3 Composition API 详解

Vue 3 引入了 Composition API，这是一种全新的逻辑复用和代码组织方式，相比 Options API 更加灵活和可扩展。

什么是 Composition API？

Composition API 是基于函数的 API，允许我们将相关的逻辑组合在一起，而不是将逻辑分散在 data、methods、computed 等选项中。

Options API vs Composition API

// Options API
export default {
  data() {
    return {
      count: 0,
      message: 'Hello Vue!'
    }
  },
  methods: {
    increment() {
      this.count++
    },
    showMessage() {
      alert(this.message)
    }
  }
}

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

export default {
  setup() {
    const count = ref(0)
    const message = ref('Hello Vue!')
    
    const increment = () => {
      count.value++
    }
    
    const showMessage = () => {
      alert(message.value)
    }
    
    return {
      count,
      message,
      increment,
      showMessage
    }
  }
}

核心概念

ref vs reactive

import { ref, reactive } from 'vue'

// ref - 用于基础类型
const count = ref(0)
count.value++ // 需要 .value

// reactive - 用于对象
const state = reactive({
  count: 0,
  message: 'Hello'
})
state.count++ // 不需要 .value

computed

import { computed } from 'vue'

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

// 或者在 setup 中
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})

watch

import { watch } from 'vue'

// 监听单个 ref
watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`)
})

// 监听多个 ref
watch([count, message], ([newCount, newMsg], [oldCount, oldMsg]) => {
  console.log(`Count: ${oldCount} -> ${newCount}`)
  console.log(`Message: ${oldMsg} -> ${newMsg}`)
})

// 监听 reactive 对象
watch(state, (newVal, oldVal) => {
  console.log('State changed', newVal)
}, { deep: true })

实战示例

表单处理

import { ref, reactive } from 'vue'

export default {
  setup() {
    const formData = reactive({
      username: '',
      email: '',
      password: ''
    })
    
    const errors = reactive({
      username: '',
      email: '',
      password: ''
    })
    
    const validate = () => {
      let valid = true
      
      if (!formData.username) {
        errors.username = 'Username is required'
        valid = false
      }
      
      if (!formData.email) {
        errors.email = 'Email is required'
        valid = false
      }
      
      if (!formData.password) {
        errors.password = 'Password is required'
        valid = false
      }
      
      return valid
    }
    
    const submit = () => {
      if (validate()) {
        console.log('Form submitted:', formData)
      }
    }
    
    return {
      formData,
      errors,
      submit
    }
  }
}

列表管理

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const items = ref([])
    const loading = ref(false)
    const error = ref(null)
    
    const fetchItems = async () => {
      loading.value = true
      error.value = null
      
      try {
        const response = await fetch('https://api.example.com/items')
        const data = await response.json()
        items.value = data
      } catch (err) {
        error.value = err.message
      } finally {
        loading.value = false
      }
    }
    
    const addItem = (item) => {
      items.value.push(item)
    }
    
    const removeItem = (index) => {
      items.value.splice(index, 1)
    }
    
    onMounted(() => {
      fetchItems()
    })
    
    return {
      items,
      loading,
      error,
      fetchItems,
      addItem,
      removeItem
    }
  }
}

自定义 Hooks

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  
  const update = (e) => {
    x.value = e.pageX
    y.value = e.pageY
  }
  
  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })
  
  return { x, y }
}

// 使用示例
import { useMouse } from './useMouse'

export default {
  setup() {
    const { x, y } = useMouse()
    
    return {
      x,
      y
    }
  }
}

生命周期钩子

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

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted')
    })
    
    onUpdated(() => {
      console.log('Component updated')
    })
    
    onUnmounted(() => {
      console.log('Component unmounted')
    })
  }
}

依赖注入

import { provide, inject } from 'vue'

// 父组件
const theme = ref('dark')
provide('theme', theme)

// 子组件
const theme = inject('theme')

性能优化

import { shallowRef, markRaw } from 'vue'

// 使用 shallowRef 避免深度响应式
const shallowObj = shallowRef({ count: 0 })

// 标记为非响应式
const nonReactiveObj = markRaw({ count: 0 })

// 使用 toRefs 避免解构丢失响应性
const { count, message } = toRefs(state)