Vue 3 Composition API 实战指南

为什么用 Composition API？

相比 Options API，Composition API 提供更好的逻辑复用和代码组织能力。

基础用法

<script setup>
import { ref, computed, watch } from 'vue'

// 响应式数据
const count = ref(0)
const name = ref('Vue')

// 计算属性
const doubleCount = computed(() => count.value * 2)

// 方法
function increment() {
  count.value++
}

// 监听
watch(count, (newVal, oldVal) => {
  console.log(`count: ${oldVal} -> ${newVal}`)
})
</script>

<template>
  <div>
    <p>{{ count }} - {{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

常用 Composables

useFetch

function useFetch(url) {
  const data = ref(null)
  const loading = ref(true)
  const error = ref(null)
  
  fetch(url)
    .then(res => res.json())
    .then(result => data.value = result)
    .catch(err => error.value = err)
    .finally(() => loading.value = false)
  
  return { data, loading, error }
}

// 使用
const { data, loading, error } = useFetch('/api/users')

useLocalStorage

function useLocalStorage(key, defaultValue) {
  const value = ref(() => {
    const stored = localStorage.getItem(key)
    return stored ? JSON.parse(stored) : defaultValue
  })
  
  watch(value, (newVal) => {
    localStorage.setItem(key, JSON.stringify(newVal))
  }, { deep: true })
  
  return value
}

生命周期

import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  console.log('组件已挂载')
})

onUnmounted(() => {
  console.log('组件将卸载')
})

Composition API 让 Vue 代码更灵活、更易测试、更好复用！