前言

背景:有同學(xué)說我上一篇《Vue 2.x 項(xiàng)目升級到 Vue 3詳細(xì)指南【總結(jié)版】》看的太費(fèi)勁，讓我直接整理一篇Vue2.x 升級到 vue3 的修改清單，所以整理了此文章。

Vue 3.0 已經(jīng)發(fā)布，很多人可能都在疑惑如何將自己的 Vue 2.x 項(xiàng)目升級到 Vue 3.0。這篇文章將詳細(xì)地介紹這個(gè)過程。它引入了許多新特性和改進(jìn)，包括更好的性能、更小的包大小、更好的 TypeScript 支持，以及新的 API，如 Composition API。

從 Vue 2.x 升級到 Vue 3 并不是一個(gè)簡單的任務(wù)，因?yàn)?Vue 3 引入了一些重大的不兼容變更。這些變更可能會影響你的應(yīng)用的行為，或者需要你修改你的代碼以適應(yīng)新的 API。

在開始升級之前，我建議你先備份你的項(xiàng)目，或者使用版本控制系統(tǒng)，如Git，以便在需要時(shí)可以輕松地回滾到舊版本。此外，你應(yīng)該確保你的項(xiàng)目的所有依賴項(xiàng)都已經(jīng)支持 Vue 3，或者至少有可用的替代方案。

現(xiàn)在，讓我們開始升級你的 Vue 2.x 項(xiàng)目到 Vue 3 吧！go go

0.遷移過程

1. 安裝 Vue 3

首先，你需要安裝 Vue 3 到你的項(xiàng)目。你可以通過 npm 或 yarn 來進(jìn)行安裝：

npm install vue@next
# 或者
yarn add vue@next

2. 逐一處理遷移中的警告

Vue 3 在兼容性構(gòu)建中為大部分的有破壞性的改動(dòng)提供了運(yùn)行時(shí)警告。在你完成初始升級之后，你可以根據(jù)運(yùn)行時(shí)控制臺中的警告提示逐一處理新代碼中的問題。

3. 遷移全局和內(nèi)部 API

Vue 3 的全局 API 發(fā)生了一些改變，如Vue.prototype 被改為 config.globalProperties，Vue.mixin() 現(xiàn)在只適用在應(yīng)用的根組件，而非全局。這些全局 API 的改變都需要在遷移時(shí)被處理和修改。

4. 遷移 Vue Router 和 Vuex

Vue Router 和 Vuex 在 Vue 3 中也有一些改變。你需要安裝 vue-router@4 和 vuex@next 并根據(jù)相應(yīng)文檔進(jìn)行遷移。

5. 處理其他的不兼容變更

Vue 3 有一些其他的不兼容變更，如新的生命周期函數(shù)名稱、更改的事件行為、移除的 filters 等。你需要查閱遷移指南，了解如何處理這些不兼容變更。

1. Vue3特性

在說升級之前 我們先來了解一下。Vue 3 引入了許多新特性和改進(jìn)，以下是一些主要的亮點(diǎn)：

1. Composition API

這是 Vue 3 的一項(xiàng)主要新特性，它提供了一種新的方式來組織和復(fù)用代碼。與 Vue 2 的 Options API 相比，Composition API 提供了更好的類型推斷，使得 Vue 更易于與 TypeScript 一起使用。

import { ref, computed } from 'vue';export default {setup() {const count = ref(0);const increment = () => { count.value++ };const decrement = () => { count.value-- };const isEven = computed(() => count.value % 2 === 0);return {count,increment,decrement,isEven};}
};

2. 更好的性能

Vue 3 的虛擬 DOM 重寫和優(yōu)化，使得渲染速度比 Vue 2 快約 1.3 到 2 倍。此外，Vue 3 的包大小比 Vue 2 小約 10%。

3. 更好的 TypeScript 支持

Vue 3 的源代碼完全用 TypeScript 重寫，這使得 Vue 3 與 TypeScript 的集成更加緊密，提供了更好的類型推斷和編輯器支持。

4. 多個(gè)根元素

vue 3 允許在單文件組件中使用多個(gè)根元素，這使得組件的結(jié)構(gòu)更加靈活。

<template><header>...</header><main>...</main><footer>...</footer>
</template>

5. Suspense 組件

Vue 3 引入了新的 Suspense 組件，用于處理異步組件的加載狀態(tài)。這使得你可以在異步組件加載完成之前顯示一個(gè)加載指示器，或者在加載失敗時(shí)顯示一個(gè)錯(cuò)誤消息。

<Suspense><template #default><AsyncComponent /></template><template #fallback><div>Loading...</div></template>
</Suspense>

6. Teleport 組件

Vue 3 引入了新的 Teleport 組件，用于將子組件渲染到 DOM 樹的其他位置。這對于實(shí)現(xiàn)模態(tài)對話框、通知、彈出菜單等功能非常有用。

<Teleport to="#modal-container"><div class="modal">...</div>
</Teleport>

7. 全局 API 的改變

Vue 3 對全局 API 進(jìn)行了重大的改變，以使其更加模塊化和樹搖優(yōu)化友好。例如，Vue.component、Vue.directive 等全局 API 在 Vue 3 中被移除，取而代之的是 app.component、app.directive 等實(shí)例方法。

8. 自定義渲染器 API

Vue 3 提供了一個(gè)新的自定義渲染器 API，使得你可以創(chuàng)建自己的渲染器，例如用于創(chuàng)建原生移動(dòng)應(yīng)用的渲染器。

2.修改清單

我們需要按照以下方式將項(xiàng)目中使用到地方進(jìn)行修改。以進(jìn)行適配。

1.模板指令

Vue 3 對多個(gè)模板指令進(jìn)行了更新，包括 v-model，v-if/v-for，v-bind 等。這意味著這些指令的行為可能與 Vue 2 不同，你需要檢查你的代碼以確保它們與新的行為保持一致。

2. v-model

在 Vue 3 中，v-model 的行為和語法發(fā)生了變化。現(xiàn)在，你需要使用 v-model:[argument]="data" 的形式來綁定數(shù)據(jù)，而不是 Vue 2 中的 v-model="data"。

<!-- Vue 2 -->
<input v-model="message" /><!-- Vue 3 -->
<input v-model:value="message" />

3. key 使用改變

在 Vue 3 中，key 的使用方式發(fā)生了變化?，F(xiàn)在，v-for 中的 key 是必須的。這意味著你需要在所有的 v-for 指令中添加 key。

<!-- Vue 2 -->
<div v-for="item in items">{{ item }}
</div><!-- Vue 3 -->
<div v-for="item in items" :key="item.id">{{ item }}
</div>

4. **v-if 與 v-for 優(yōu)先級

在 Vue 3 中，v-if 和 v-for 在同一個(gè)元素上的優(yōu)先級發(fā)生了變化?，F(xiàn)在，v-if 的優(yōu)先級高于 v-for。這意味著如果你在同一個(gè)元素上使用了這兩個(gè)指令，你需要確保它們的使用是正確的。

<!-- Vue 2 -->
<div v-for="item in items" v-if="item.isActive">{{ item }}
</div><!-- Vue 3 -->
<div v-for="item in items" :key="item.id"><div v-if="item.isActive">{{ item }}</div>
</div>

5. v-bind 合并行為

Vue 3 改變了 v-bind 的合并行為。在 Vue 2 中，如果你有多個(gè) v-bind，它們會被合并。但在 Vue 3 中，后面的 v-bind 會覆蓋前面的。

<!-- Vue 2 -->
<div v-bind="{ id: 'foo' }" v-bind="{ id: 'bar' }"></div> <!-- id is 'foo' --><!-- Vue 3 -->
<div v-bind="{ id: 'foo' }" v-bind="{ id: 'bar' }"></div> <!-- id is 'bar' -->

6. v-on.native 移除:

Vue 3 移除了 v-on.native 修飾符。你需要更新你的代碼，移除所有的 .native 修飾符，并使用新的 emits 選項(xiàng)。

<!-- Vue 2 -->
<my-component @click.native="doSomething"></my-component><!-- Vue 3 -->
<my-component @click="doSomething"></my-component>

8. 函數(shù)式組件

Vue 3 更改了函數(shù)式組件的寫法，不再需要 functional 關(guān)鍵詞。你需要更新你的函數(shù)式組件以適應(yīng)新的寫法。

  <!-- Vue 2 -->Vue.component('my-component', {functional: true,// ...})<!-- Vue 3 -->const MyComponent = (props, { slots }) => {// ...}

9. 異步組件:

Vue 3 改變了異步組件的語法。你需要將你的異步組件語法更新為新的語法。

<!-- Vue 2 -->
Vue.component('my-component', () => import('./MyComponent.vue'))<!-- Vue 3 -->
const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue'))

10. emits 選項(xiàng):

Vue 3 添加了全新的 emits 選項(xiàng)，用于定義組件發(fā)出的事件。你需要在你的組件中添加 emits 選項(xiàng)。

<!-- Vue 3 -->
export default {emits: ['my-event'],methods: {doSomething() {this.$emit('my-event')}}
}

11. 渲染函數(shù):

Vue 3 的渲染函數(shù) API 有所改變。你需要更新你的渲染函數(shù)以適應(yīng)新的 API。

   <!-- Vue 2 -->Vue.component('my-component', {render: function (createElement) {return createElement('div', this.$slots.default)}})<!-- Vue 3 -->const MyComponent = {render() {return h('div', this.$slots.default())}}

12. 移除的 APIs:

Vue 3 移除了一些不再需要的 APIs，例如 Vue.set，Vue.delete 和 Vue.observable。這些API在Vue.js 2.x中用于添加響應(yīng)式屬性到對象或刪除屬性，Vue 3中的響應(yīng)式系統(tǒng)使用 Proxy，所以這些API不再需要。

// Vue 2
Vue.set(object, propertyName, value);
Vue.delete(object, propertyName);
Vue.observable(object);// Vue 3
// 整個(gè)對象都是響應(yīng)式的，不需要特定的API

13. 按鍵修飾符:

Vue 3 不再支持按鍵修飾符的別名，例如 @keyup.enter，@keyup.space 等。你需要將這些修飾符替換為它們的鍵碼。

<!-- Vue 2 -->
<input @keyup.enter="submit"><!-- Vue 3 -->
<input @keyup.13="submit">

14. 事件 API:

Vue 3 的事件 API 有所改變，例如 $on，$off 和 $once 已被移除。你需要使用新的事件 API。

// Vue 2
this.$on('event', handler);
this.$off('event', handler);
this.$once('event', handler);// Vue 3
// 使用事件發(fā)射器如mitt或tiny-emitter

15. 過濾器:

Vue 3 不再支持過濾器。你需要將過濾器替換為計(jì)算屬性或者方法。

<!-- Vue 2 -->
{{ message | filterA | filterB }}<!-- Vue 3 -->
{{ filterB(filterA(message)) }}

16. 內(nèi)聯(lián)模板:

Vue 3 不再支持內(nèi)聯(lián)模板。你需要將內(nèi)聯(lián)模板替換為 render 函數(shù)或者 template。

<!-- Vue 2 -->
<my-component inline-template><div>{{ message }}</div>
</my-component><!-- Vue 3 -->
<my-component><template #default="{ message }"><div>{{ message }}</div></template>
</my-component>

17. $children:

Vue 3 不再支持 $children。你需要找到其他方式來訪問子組件。要訪問子組件，可以使用 ref 和 provide/inject。

<!-- Vue 2 -->
this.$children;<!-- Vue 3 -->
// 使用 ref 或 provide/inject 訪問子組件

18. propsData 選項(xiàng):

Vue 3 不再支持 propsData 選項(xiàng)。你需要在創(chuàng)建組件實(shí)例時(shí)直接傳遞 props。

// Vue 2
new Vue({propsData: {prop: value,},
});// Vue 3
createApp({props: {prop: value,},
});

19. Attribute 強(qiáng)制行為:

Vue 3 現(xiàn)在默認(rèn)將未聲明的 attribute 視為 DOM attribute。如果你需要強(qiáng)制 attribute 來響應(yīng)化，你需要使用 v-bind。

<!-- Vue 2 -->
<my-component my-attr="value" /><!-- Vue 3 -->
<my-component v-bind="{ 'my-attr': 'value' }" />

20. 自定義指令:

Vue 3 的自定義指令 API 有所改變。你需要更新你的自定義指令以適應(yīng)新的 API。

// Vue 2
Vue.directive('my-directive', {bind(el, binding, vnode, oldVnode) { /* ... */ },update(el, binding, vnode, oldVnode) { /* ... */ },
});// Vue 3
const myDirective = {beforeMount(el, binding, vnode, prevVnode) { /* ... */ },updated(el, binding, vnode, prevVnode) { /* ... */ },
};

21. Data 選項(xiàng):

Vue 3 的 data 選項(xiàng)必須是一個(gè)函數(shù)。你需要將所有的 data 選項(xiàng)轉(zhuǎn)換為函數(shù)。

   // Vue 2new Vue({data: {message: 'Hello Vue!',},});// Vue 3createApp({data() {return {message: 'Hello Vue!',};},});

22. Mount API 的改變:

Vue 3 的 mount API 有所改變。你需要更新你的 mount 調(diào)用以適應(yīng)新的 API。

   // Vue 2new Vue({/* options */}).$mount('#app');// Vue 3createApp({/* options */}).mount('#app');

23. Props 的默認(rèn)函數(shù)訪問 this:

Vue 3 不再允許在 props 的默認(rèn)函數(shù)中訪問 this。你需要找到其他方式來獲取需要的數(shù)據(jù)。

   // Vue 2props: {prop: {default: function () {return this.someData;},},};// Vue 3props: {prop: {default() {// "this" 是 undefined},},};

24. Transition class 名更改:

Vue 3 更改了 transition 的 class 名稱，為了與 CSS 動(dòng)畫一致，v-enter 改為了 v-enter-from，v-leave 改為了 v-leave-from。

   /* Vue 2 */.fade-enter, .fade-leave-to {opacity: 0;}/* Vue 3 */.fade-enter-from, .fade-leave-to {opacity: 0;}

25. Transition 作為根節(jié)點(diǎn):

Vue 3 不再允許 transition 作為根節(jié)點(diǎn)。你需要確保你的組件有一個(gè)非 transition 的根節(jié)點(diǎn)。

   <!-- Vue 2 --><transition><div>...</div></transition><!-- Vue 3 --><!-- transition 不能作為根節(jié)點(diǎn) --><div><transition><div>...</div></transition></div>

26. TransitionGroup 根元素:

Vue 3 的 TransitionGroup 不再渲染一個(gè)默認(rèn)的根元素。你需要手動(dòng)添加一個(gè)根元素。

   <!-- Vue 2 --><transition-group><div v-for="item in items" :key="item.id">{{ item }}</div></transition-group><!-- Vue 3 --><transition-group><div><div v-for="item in items" :key="item.id">{{ item }}</div></div></transition-group>

27. VNode 生命周期事件:

Vue 3 的 VNode 生命周期事件有所改變。你需要更新你的代碼以適應(yīng)新的事件。

   // Vue 2vnode.context.$on('hook:updated', handler);// Vue 3onUpdated(handler);

28. Watch 偵聽數(shù)組:

Vue 3 的 watch 對于數(shù)組的行為有所改變。你需要更新你的 watch 調(diào)用以適應(yīng)新的行為。

   // Vue 2watch(() => [...array], handler);// Vue 3watch(() => array, handler, { deep: true });

參考資料

1. Vue 3 Migration Guide - Vue 官方提供的遷移指南，詳細(xì)介紹了從 Vue 2 到 Vue 3 的各種改變和升級策略。

2. Vue 3 Upgrade Guide - 這篇博客文章詳細(xì)介紹了 Vue 2 到 Vue 3 的升級過程，包括實(shí)踐技巧和遇到的問題。