为什么迁移?

Composition API 将相关逻辑聚合在一起,解决了 Options API 中逻辑分散的问题,同时更易于 TypeScript 类型推导和逻辑复用。

基础用法

import { ref, computed, onMounted } from "vue";

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);
    onMounted(() => console.log("mounted"));
    return { count, double };
  }
};

自定义 Hook

将可复用逻辑提取到 useXxx 函数中,比如 useFetch、useLocalStorage,在多个组件间共享状态逻辑。