为什么迁移?
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,在多个组件间共享状态逻辑。