使用Vue3時(shí)遇到的一些問題

來源| OSCHINA 社區(qū)

作者 |葡萄城技術(shù)團(tuán)隊(duì)

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

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

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

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

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

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

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

2.解構(gòu) reactive 對象

下面代碼中，count 封裝成了 reactive 對象，點(diǎn)擊按鈕時(shí)，count 會自增。

如果需要使用 ES6 結(jié)構(gòu)賦值對 state 進(jìn)行結(jié)構(gòu)，需要使用如下的代碼：

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

3.使用.value 造成的困惑

Ref 接受一個值并返回一個響應(yīng)式對象，該值只有在內(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 如果應(yīng)用在 template 中，不需要對 ref 進(jìn)行解包，也就是不需要使用.vue。

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

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

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. 聲明組件選項(xiàng)

setup 不支持如下組件選項(xiàng)聲明：

name

inheritAttrs

customOptions

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

6. 使用 Reactivity Transform

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

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 前綴或完全更名實(shí)現(xiàn)，下圖詳細(xì)列出了具體的變化：

10.產(chǎn)品文檔

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