Vue 2 迁移 Vue 3（二）：Composition API 与逻辑复用

选项映射表

迁移时大部分选项都有直接对应：

Vue 2 Options API	Vue 3 Composition
data 属性	ref() / reactive()
computed	computed()
watch 选项 / $watch	watch() / watchEffect()
methods	普通函数
mounted	onMounted()
beforeDestroy	onBeforeUnmount()
this.$emit	setup(props, { emit })
provide/inject	provide() / inject()

setup 里没有 this，所有东西先声明再使用。

mixin → 组合式函数

以一个分页 mixin 为例，迁移后变成一个普通函数，数据来源一目了然：

// Vue 2：mixin 悄悄注入 page、fetchData，多了根本不知道谁是谁
export default {
  data() { return { page: 1, list: [] } },
  methods: { fetchData() { /* this.page ... */ } },
}

// Vue 3：useXxx 函数，返回什么用什么
function usePagination(fetcher) {
  const page = ref(1)
  const list = ref([])
  const loading = ref(false)

  async function fetchData() {
    loading.value = true
    list.value = await fetcher(page.value)
    loading.value = false
  }
  watch(page, fetchData) // 页码变化自动重新请求
  onMounted(fetchData)

  return { page, list, loading, fetchData }
}

// 组件里：
const { page, list, loading } = usePagination((p) =>
  fetch('/api/posts?page=' + p).then(r => r.json())
)

好处：可显式传参（fetcher）、可重名时直接改名解构、类型自动推导、可在任何组件里复用且来源清晰。

迁移策略建议

不必一次性重写所有组件——Vue 3 允许 Options API 与 Composition API 共存。推荐节奏：

新组件、新逻辑一律用 <script setup>
旧组件中复用频繁、逻辑复杂的优先改造（收益最大）
纯展示的简单组件保持 Options API 也完全没问题

改造时先抽组合式函数，再把组件里的选项逐个替换，每改一个组件跑一遍回归，风险可控。

Vue 2 迁移 Vue 3（二）：Composition API 与逻辑复用

Vue 2 迁移 Vue 3（二）：Composition API 与逻辑复用

选项映射表

mixin → 组合式函数

迁移策略建议

评论0 条

发表评论