Vue 3 Composition API 指南

为什么使用 Composition API？

Composition API 提供更好的逻辑复用、类型推断和代码组织方式。

核心概念

setup 函数

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

const count = ref(0);
const double = computed(() => count.value * 2);

function increment() {
  count.value++;
}
</script>

<template>
  <button @click="increment">{{ count }} - {{ double }}</button>
</template>

响应式 API

import { ref, reactive, toRefs } from "vue";

// ref - 基本类型
const count = ref(0);
count.value = 1;

// reactive - 对象
const state = reactive({ name: "John", age: 30 });
state.age = 31;

// toRefs - 解构保持响应式
const { name, age } = toRefs(state);

生命周期

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

onMounted(() => {
  console.log("组件挂载");
});

onUpdated(() => {
  console.log("组件更新");
});

onUnmounted(() => {
  console.log("组件卸载");
});

侦听器

watch(count, (newVal, oldVal) => {
  console.log(`count: ${oldVal} -> ${newVal}`);
});

watchEffect(() => {
  console.log(`count is ${count.value}`);
});

组合式函数

// useCounter.js
export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  return { count, increment, decrement };
}

// 使用
const { count, increment } = useCounter(10);

实际示例

<script setup>
import { ref, onMounted } from "vue";

function useFetch(url) {
  const data = ref(null);
  const loading = ref(true);
  const error = ref(null);
  
  onMounted(async () => {
    try {
      const res = await fetch(url);
      data.value = await res.json();
    } catch (e) {
      error.value = e;
    } finally {
      loading.value = false;
    }
  });
  
  return { data, loading, error };
}

const { data: users, loading } = useFetch("/api/users");
</script>

Composition API 让 Vue 更强大灵活！