黃琴：一枚前端妹子，愛笑、愛運(yùn)動、愛音樂、愛旅行

前言

瞪瞪，胖琴的第三篇文章來襲！近期在自己的規(guī)劃中列著一份 vue3 清單。關(guān)于 vue3，雖然之前很早就看過了，但是也只是簡單的了解一番寫了幾個(gè)小 demo，而且我司的主要技術(shù)棧也是 vue, 近期趁著這股學(xué)習(xí)的勁，趕緊向上申請了一個(gè)內(nèi)部項(xiàng)目，想著用 vue3 實(shí)踐一波，希望這一篇總結(jié)對一些小伙伴提供一些幫助。

以下主要會從兩部分去做總結(jié),一部分是可能混淆的點(diǎn) or 一些常見的問題，另外一部分是實(shí)踐過程中遇到的坑點(diǎn)/注意點(diǎn)。

關(guān)于 vue3 的一些疑問點(diǎn)

1: 使用了 Vue3，是否都要遵循用 Composition API 的形式去寫頁面？

答案是否定的。需要注意一點(diǎn)：Vue3 并沒有廢棄 Options API,甚至還會全力支持兼容 Vue2 語法的工作。而 CompositionAPI 出現(xiàn)的背景主要是為了解決邏輯抽象和和復(fù)用的問題，但不意味著它成為了 Vue3 的標(biāo)準(zhǔn)。So,如何區(qū)分場景使用Options API or Composition API主要看業(yè)務(wù)邏輯的復(fù)雜程序，例如一些簡單的 toast/button 等基礎(chǔ)組件，用options API形式會更加清晰和簡潔。而相對復(fù)雜的業(yè)務(wù)邏輯，可以用Composition API，可以把單獨(dú)一塊邏輯抽離到一個(gè)模塊，通過 hook 函數(shù)的方式去解決。

2: Vue3 中混用 Options API 和 Composition API 會不會對性能產(chǎn)生影響?

不會。其實(shí)從問題 1 就可以明顯地看出來并不會對性能產(chǎn)生任何影響。不應(yīng)該被option api限制思維，而更多關(guān)注邏輯內(nèi)聚問題

3: 關(guān)于 setup 中沒有 this 的問題

vue 官方文檔是這么解釋的：在 setup() 內(nèi)部，this 不會是該活躍實(shí)例的引用，因?yàn)?setup() 是在解析其它組件選項(xiàng)之前被調(diào)用的，所以 setup() 內(nèi)部的 this 的行為與其它選項(xiàng)中的 this 完全不同。這在和其它選項(xiàng)式 API 一起使用 setup() 時(shí)可能會導(dǎo)致混淆。這意味著，除了 props 之外，你將無法訪問組件中聲明的任何屬性---本地狀態(tài)，計(jì)算屬性/方法。

但是從源碼實(shí)現(xiàn)你會發(fā)現(xiàn)其實(shí)組件實(shí)例創(chuàng)建在前，函數(shù)之所以訪問不到 this，是因?yàn)樗趫?zhí)行 setup 函數(shù)的時(shí)候，就沒有把組件實(shí)例 instance 傳給 setup。也沒有把 this 指向?qū)嵗?instance。So 執(zhí)行順序其實(shí)是：組件實(shí)例創(chuàng)建在 setup 函數(shù)執(zhí)行之前，但是 setup 執(zhí)行的時(shí)候，組件還沒有 mounted，而晚于 beforeCreate 鉤子，早于 create 鉤子。

4: reactive VS ref

剛開始看文檔時(shí)，大家往往會去拿這兩個(gè)去對比，總結(jié)一下：

reactive API: 可以把一個(gè)對象數(shù)據(jù)變成響應(yīng)式(等同于 2.x 中的 Vue.observable())，Composition API 更推薦用戶主動定義響應(yīng)式式數(shù)據(jù)，而非內(nèi)部的黑盒處理

ref: 針對數(shù)組 or 對象本質(zhì)就是reactive實(shí)現(xiàn)的，讀取值時(shí)是ref.value

另外注意一下toRefs: 針對組合函數(shù)返回響應(yīng)式對對象時(shí)使用 toRefs, 本質(zhì)上是幫我們做了一層getter和setter處理，解構(gòu)就可以得到響應(yīng)式的數(shù)據(jù)，這也就降低了一些關(guān)于ref的心智負(fù)擔(dān)

5: Vue3 響應(yīng)式比 Vue2 的性能要好嗎？

vue3 出來的時(shí)候，往往聽到的一些答案都是說 Vue3 性能比 Vue2 性能好，但真的是嗎？在 Vue3 發(fā)布那一段期間中(我也去薅羊毛薅到了 1 元的源碼課解析中學(xué)習(xí)了一番：老黃 YYDS)，甚至包括群里大家都在討論這個(gè)問題。

首先從實(shí)現(xiàn)上來講：我們都知道 vue2 中的響應(yīng)式主要?dú)w功于Object.defineProperty, 它主要劫持對象的屬性，所以它不能觀測到對象屬性的添加和刪除，而在 vue 中，是用Proxy實(shí)現(xiàn)的，劫持的是整個(gè)對象，能規(guī)避掉 vue2 留下的問題，但也有明顯的缺點(diǎn)就是兼容性不夠強(qiáng)。但是對比 Vue2，你需要知道的是 vue3 性能上的優(yōu)勢主要還是體現(xiàn)在初始化階段。因?yàn)?Vue2 中定位響應(yīng)式對象時(shí)，會遞歸把子對象變成響應(yīng)式。而 Vue3 其實(shí)是惰性執(zhí)行：在對象屬性被真正訪問的時(shí)候才會遞歸執(zhí)行子對象變成響應(yīng)式。

6: Vue Composition API VS React Hooks

Vue3 的Composition API和React Hooks的寫法很像，大家都會忍不住拿他們?nèi)プ鰝€(gè)對比，關(guān)于這部分內(nèi)容的 PK，我司的小伙伴已經(jīng)給總結(jié)過了，還很全面，這個(gè)就不細(xì)說了,傳送門：

Vue Composition API 和 React Hooks 對比：https://juejin.cn/post/6847902223918170126

除了一些常見的問題時(shí)，更重要的就是實(shí)踐，對于新項(xiàng)目，可以直接使用 vue3 起步，但更多的對于已有的項(xiàng)目，在 vue2 升級到 vue3 實(shí)踐時(shí)，肯定會踩不少坑，以下是關(guān)于在實(shí)踐過程中可能會遇到的一些注意點(diǎn)&坑點(diǎn)

1. 報(bào)錯(cuò)以下警告：告知 script setup 當(dāng)前仍然是個(gè)實(shí)驗(yàn)性的新特性，還沒有作為正式特性發(fā)布，后面會不會有變化還不好說。

[@vue/compiler-sfc]?

感谢您访问我们的网站，您可能还对以下资源感兴趣：
国产秋霞理论久久久电影-婷婷色九月综合激情丁香-欧美在线观看乱妇视频-精品国avA久久久久久久-国产乱码精品一区二区三区亚洲人-欧美熟妇一区二区三区蜜桃视频