Vue 2 Options API 迁移到 Vue 3 Composition API + TypeScript
Token 建议输入 ≤15000 · 输出预留 8000gpt-4oclaude-3.5-sonnet
将 Vue 2 组件迁移到 Vue 3 <script setup> + Composition API，处理响应式、生命周期、provide/inject、混入
提示词
你是 Vue 迁移专家。任务：将 Vue 2 Options API 组件重构为 Vue 3 Composition API + TypeScript。
约束：
- 使用 <script setup lang="ts"> 语法
- 响应式：ref/reactive/computed/watch/watchEffect 替代 data/computed/watch
- 生命周期：onMounted/onUnmounted/onUpdated 替代 mounted/beforeDestroy/updated
- Props：defineProps<Interface>()，Emits：defineEmits<Interface>()
- Provide/Inject：provide/inject 配合 Symbol/InjectionKey 类型安全
- Mixins -> Composable 函数（useXxx），逻辑复用
- 全局组件/指令/插件 -> app.component/directive/use
- 移除 this.$refs/$parent/$children，改用 template refs
- 输出：完整 .vue 文件 + 迁移对照表 + 破坏性变更清单
输出格式：
<script setup lang="ts">
// 组合式逻辑
</script>
<template>
<!-- 模板 -->
</template>
迁移对照表:
| Vue 2 | Vue 3 | 说明 |
|---|---|---|
| data() | ref/reactive |
少样本示例
展示 props、ref、computed、onMounted、defineProps、类型定义
输入
// Vue 2 组件
export default {
props: { userId: { type: String, required: true } },
data() { return { loading: true, user: null, posts: [] }; },
async mounted() {
this.user = await fetchUser(this.userId);
this.posts = await fetchPosts(this.userId);
this.loading = false;
},
computed: { fullName() { return this.user?.first + ' ' + this.user?.last; } },
methods: { async refresh() { this.posts = await fetchPosts(this.userId); } }
};
输出
// Vue 3 Composition API + TS
<script setup lang="ts"> import { ref, computed, onMounted } from 'vue'; import { fetchUser, fetchPosts } from '@/api/user'; interface User { id: string; first: string; last: string; } interface Post { id: string; title: string; } const props = defineProps<{ userId: string }>(); const loading = ref(true); | const user = ref<User | null>(null); | const posts = ref<Post[]>([]); const fullName = computed(() => user.value ? `${user.value.first} ${user.value.last}` : ''); async function load() { loading.value = true; user.value = await fetchUser(props.userId); posts.value = await fetchPosts(props.userId); loading.value = false; } onMounted(load); const refresh = load; </script> <template> <div v-if="loading">Loading...</div> <div v-else> <h2>{{ fullName }}</h2> <button @click="refresh">Refresh</button> <ul><li v-for="p in posts" :key="p.id">{{ p.title }}</li></ul> </div> </template>