Vue2 迁移 Vue3

主要变化

全局 API

// Vue2
import Vue from 'vue'
Vue.use(VueRouter)

// Vue3
import { createApp } from 'vue'
const app = createApp(App)
app.use(router)

生命周期

// Vue2
beforeDestroy() {}
destroyed() {}

// Vue3
beforeUnmount() {}
unmounted() {}

v-model

<!-- Vue2 -->
<MyComponent v-model="value" />
<!-- 等同于 -->
<MyComponent :value="value" @input="value = $event" />

<!-- Vue3 -->
<MyComponent v-model="value" />
<!-- 等同于 -->
<MyComponent :modelValue="value" @update:modelValue="value = $event" />

多个 v-model

<!-- Vue3 -->
<MyComponent
  v-model:title="title"
  v-model:content="content"
/>

移除的功能

$on、$off、$once
filters
$children
inline-template

新增功能

Composition API
Teleport
Suspense
Fragments
Emits 选项

迁移步骤

1. 升级依赖

yarn add vue@3
yarn add vue-router@4
yarn add vuex@4  # 或 pinia

2. 更新入口文件

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App)
  .use(router)
  .use(store)
  .mount('#app')

3. 更新路由

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes
})

4. 更新 Vuex

import { createStore } from 'vuex'

const store = createStore({
  state: {},
  mutations: {},
  actions: {}
})

5. 组件迁移

使用 Composition API 重写：

<script setup>
import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const double = computed(() => count.value * 2)

onMounted(() => {
  console.log('mounted')
})
</script>

迁移工具

# 安装迁移构建版本
yarn add @vue/compat

# vite.config.js
export default {
  resolve: {
    alias: {
      vue: '@vue/compat'
    }
  }
}