來源| OSCHINA 社區(qū)

作者 |葡萄城技術團隊

Vue3 目前已經(jīng)趨于穩(wěn)定，不少代碼庫都已經(jīng)開始使用它，很多項目未來也必然要遷移至 Vue3。本文記錄我在使用 Vue3 時遇到的一些問題，希望能為其他開發(fā)者提供幫助。

1.使用 reactive 封裝基礎數(shù)據(jù)類型

傳統(tǒng)開發(fā)模式中，數(shù)據(jù)聲明很簡單。但是在 Vue 中有多個響應式變量聲明方式，整體的使用規(guī)則如下：

使用 reactive 來封裝 Object，Array，Map，Set 數(shù)據(jù)類型；

使用 ref 封裝 String，Number，Boolean 類型。

如果使用 reactive 來封裝基礎數(shù)據(jù)類型，會產(chǎn)生警告，同時封裝的值不會成為響應式對象。

但是，可以使用 ref 來封裝 Object、Array 等數(shù)據(jù)類型，內(nèi)部會調(diào)用 reactive。

2.解構 reactive 對象

下面代碼中，count 封裝成了 reactive 對象，點擊按鈕時，count 會自增。

如果需要使用 ES6 結構賦值對 state 進行結構，需要使用如下的代碼：

結構復制完成之后，點擊按鈕，效果如下： 代碼看起來比較相似，而且根據(jù)以前的表現(xiàn)，邏輯是可以正常執(zhí)行的。但事實上，Vue 的響應式追蹤通過屬性獲取，這意味著我們不能去解構響應式對象，會導致引用連接丟失。這是響應式代理的限制之一。

3.使用.value 造成的困惑

Ref 接受一個值并返回一個響應式對象，該值只有在內(nèi)部對象.value 屬性下可用。

const count = ref(0)

 console.log(count) // { value: 0 }
 console.log(count.value) // 0

 count.value++
 console.log(count.value) // 1

但是 ref 如果應用在 template 中，不需要對 ref 進行解包，也就是不需要使用.vue。

需要注意的是，解包只作用于一級屬性，下邊的代碼會返回 [object Object]

正確使用.value 需要時間，初學者偶爾會忘記它。在使用時，要注意只在合適的場景下使用它。

4.Emitted 事件

從 Vue 發(fā)布以來，子組件可以通過 emits 與父組件通信，只需要添加一個自定義的監(jiān)聽器來監(jiān)聽事件即可。

this.$emit('my-event')

Vue3 中，需要使用編譯器宏 defineEmits 來聲明 emits。

const emit = defineEmits(['my-event'])
 emit('my-event')
 

在 setup 語法糖下，defineEmits 和 defineProps 會被自動引入。其它情況下，需要主動引入。

最后，由于 Vue3 中，事件必須聲明，因此再需要使用.native 修飾符，該修飾符已被移除。

5. 聲明組件選項

setup 不支持如下組件選項聲明：

name

inheritAttrs

customOptions

如果需要繼續(xù)使用這些屬性，可以聲明多個 script 腳本，如下所示：

6. 使用 Reactivity Transform

Reactivity Transform 是 Vue3 中一個預覽屬性，有一定的爭議性，默認是禁用的。它主要用來簡化組件的聲明方式。這個想法是利用編譯時轉換來自動解包 ref，從而避免使用.value。從 Vue3.3 中已經(jīng)刪除該功能，作為一個擴展包提供。由于它不是 Vue 的核心部分，且目前風險還是比較多，建議先不要在此方面投入太多事件。

7.定義異步組件

異步組件以前是通過將它們包含在方法中來聲明的。

const asyncModal = () => import('./Modal.vue')

Vue3 中需要使用 defineAsyncComponent 來聲明異步組件。

import { defineAsyncComponent } from 'vue'
 const asyncModal = defineAsyncComponent(() 
=> import('./Modal.vue'))

8.template 中使用不必要的包裝元素

Vue3 中支持多個根元素，不再需要使用外層 div 元素包裹。

9.生命周期函數(shù)

所有組件生命周期函數(shù)都通過添加 on 前綴或完全更名實現(xiàn)，下圖詳細列出了具體的變化：

10.產(chǎn)品文檔

官方對文檔已經(jīng)做了更新，補充更新了 API，并包含很多有價值的注釋、指南和最佳實踐。即使你現(xiàn)在使用的是 Vue2，通過閱讀新的文檔也會學到一些新知識。 總結 每個框架都有學習曲線，Vue3 相對 Vue2 更加陡峭，在框架切換之間也會有一定的學習成本。但 Vue3 組合式 API 相對 Vue2 選項式 API 確實更加簡潔易用。如果您在使用過程中有什么疑問，也歡迎留言交流。