平滑迁移vue2到vue3的关键是分阶段按组件推进，优先解决逻辑碎片化，再统一风格；通过composition api封装功能切片为composable函数，使用语法糖简化代码，显式导入生命周期钩子，并用组合函数替代mixin实现类型安全的逻辑复用。
平滑迁移的关键不是一次性重写，而是分阶段、按组件推进，优先解决逻辑碎片化问题，再逐步统一风格。Vue 3 官方支持 Options API 兼容（通过 @vue/compat），但真正提升可维护性的核心在于用 Composition API 重构关注点。
先做“功能切片”，别碰整个组件
不要一上来就重写整个 Vue2 组件。选一个具体业务逻辑（比如“搜索框+结果列表”或“表单校验”），把它从 data/methods/computed/watch 中剥离出来，单独封装成一个组合式函数（composable）。
- 在 Vue2 中，这个逻辑可能分散在 data（keyword、results）、methods（fetchData）、watch（监听 keyword 变化）、mounted（首次加载）里
- 迁移到 Vue3 时，新建
useSearch.js：用ref管理 keyword 和 results，onMounted和watch都在函数内部调用，fetchData也定义在里面 - 在原组件中引入并使用：
const { keyword, results, fetchData } = useSearch()—— 所有相关代码只在一个地方维护
用 <script setup> 代替 setup() 函数</script>
<script setup></script> 是 Vue3 推荐的语法糖，大幅降低迁移门槛，无需 return、无 this、自动暴露变量到模板。
- Vue2 的
data() { return { count: 0 } }→ Vue3 中直接写const count = ref(0) - Vue2 的
methods: { add() { this.count++ } }→ Vue3 中写const add = () => count.value++ - Vue2 的
computed: { double() { return this.count * 2 } }→ Vue3 中写const double = computed(() => count.value * 2) - 所有变量和函数默认可在模板中直接使用，不用 return，也不用 this
生命周期钩子要显式导入
Vue2 中的 mounted、watch 是自动注入的选项；Vue3 中它们是需手动导入的函数，必须在 <script setup></script> 内调用。
- 导入方式：
import { onMounted, onUnmounted, watch } from 'vue' - 使用方式：
onMounted(() => { console.log('组件已挂载') })，不能写成mounted() { ... } - watch 要明确监听目标（如
watch(keyword, () => {...})），不再隐式绑定 this 或字符串路径 - 注意：
beforeCreate和created在组合式 API 中被 setup 替代，无需单独处理
复用逻辑用组合函数，别用 mixin
mixin 是 Vue2 时代复用逻辑的主要方式，但它容易引发命名冲突、来源不清晰、this 指向混乱等问题。Composition API 天然支持逻辑复用。
- 把通用能力（如防抖、权限判断、本地存储同步）抽成独立的
useXXX()函数，导出响应式状态和方法 - 在多个组件中重复调用：
const { loading, fetchData } = useApi('/user')，每个调用都是独立作用域，互不干扰 - 类型提示友好，配合 TypeScript 可精准推导返回值结构，mixin 无法做到这点
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
