大家好，我是若川。最近組織了源碼共讀活動，感興趣的可以加我微信?ruochuan12

前言

10月23日，參加了前端早早聊組織的【vue生態(tài)專場】，準(zhǔn)備寫一波分享方便大家學(xué)習(xí)。早上有4個話題：volar開發(fā)，搭建平臺組件開發(fā)和維護，尤大分享vue生態(tài)進展和展望，小姐姐分享gogocode遷移老項目。干貨很多，這里先分享一下小右?guī)淼囊恍┬孪?#xff0c;感覺和我們寫代碼關(guān)系最大。

為什么還不是默認版本？

就很快！要等大部分生態(tài)跟上才行，顯然現(xiàn)在已經(jīng)準(zhǔn)備就緒了。

更詳細解釋“軟著陸”的原因：

• vue3需要時間變得穩(wěn)定

• 生態(tài)需要時間跟上

• 在成為默認版本之前需要打磨vue3

f

大版本升級的原因

• 正確的架構(gòu)設(shè)計

• 產(chǎn)出新的基礎(chǔ)功能

• 擺脫技術(shù)債

大版本升級需要考慮的一些因素

• 向后兼容

• 易升級

• 實現(xiàn)和維護成本

• 改進程度

image-2021102310223550

vue3如何在成本和改進程度中取舍

• 主要改進

f

vue3完成體到來，轉(zhuǎn)折點也要來了

image-2021102310444299

其實很多時間都花在vite上面了，全新開發(fā)生態(tài)

image-202110230534685

歐美市場沒有支持IE11的必要了

image-2021102110614493

vue3生態(tài)已經(jīng)跟上來啦！

• nuxt3：這個尤大多次強力推薦，我以前使用nuxt2也覺得賊6，準(zhǔn)備做一波分享，歡迎大家關(guān)注我B站

• VueUse：針對vue3 composition api的工具庫

• 兼容vue3的組件庫

• Ionic等移動端框架

image-2021102110658127image-2021102310733837image-2021123110845884image-202110230931902

vue3在持續(xù)變好

• script setup成為正式功能，趕緊用！

• style v-bind成為正式功能

• defineCustomElement：可以用vue寫組件庫，輸出為原生組件，可以用在其他框架中，可用于微前端

• reactivity性能提升明顯，大應(yīng)用會更明顯

• effectScope API：用在高級應(yīng)用中，比如VueUse，penia，狀態(tài)管理庫非常推薦大家使用pinia

• ref轉(zhuǎn)換

• props轉(zhuǎn)換

Ref Transform

這個說了很多，花費好幾頁，還有代碼演示，可見尤大很重視，不過這樣的語法會不會又引起腥風(fēng)血雨般的討論？

演示了$語法糖，有了它可以忘了.value

演示$$使用，通常用于hooks編寫

結(jié)構(gòu)props轉(zhuǎn)換

又演示了另一個開發(fā)痛點是關(guān)于屬性解構(gòu)會導(dǎo)致的心智負擔(dān)問題，通過props transform即可解決。

比如下面代碼中對屬性做解構(gòu)之后，甚至可以設(shè)置默認值，起別名，和rest展開，可以看到foo是響應(yīng)式的，秀的一批。

橋接到vue2

讓大家可以在vue2中享受vue3的開發(fā)體驗：

• 遷移創(chuàng)建版本：@vue/compat，一個vue3創(chuàng)建版本提供可配置的vue2兼容行為

• vue-demi：為vue2、vue3編寫通用庫

• vite-plugin-vue2：vite中寫vue2

• unplugin-script-setup-vue2：vue2中使用script setup

• vue 2.7：披著vue3外殼的vue2

新文檔

• 暗黑模式

• 基于vitepress

• 升級建議和最佳實踐：最新功能推薦，不會錯過新東西

• 重新組織學(xué)習(xí)路線

新官網(wǎng)

官網(wǎng)也會升級，包括大量重寫的向?qū)?、隨意切換新舊API，新案例，新模塊等

隨意切換options api和composition api

所見即所得！

最后變化總結(jié)

• 新文檔馬上上

• 官網(wǎng)默認vue3

• npm latest標(biāo)簽指向vue3

• github上會分開

  • 保留issue鏈接

  • vue-next會重命名為core

小意外

尤大在新加坡的酒店大堂做直播，生怕有人湊過來還要戴口罩。結(jié)果中間還是意外掉線了，等恢復(fù)了發(fā)現(xiàn)已經(jīng)講完了，尤大瞬間崩了，顯然第二遍講加快了速度，以至于我們聽得有點不夠爽，但還是再次感謝他的分享，祝他在新加坡生活愉快！

Q&A環(huán)節(jié)

vue2還會維護嗎？

2.7將會是vue2最后一個小版本，在維護18個月，之后徹底進入

vue3還會有變化嗎？

主要是ssr前提下進一步優(yōu)化客戶端性能

巨型vue2如何升級vue3

有歐美分享，大家搜一下。下午也有個分享做這個。

新加坡感覺如何

吃的東西多，隨便點，非常開心！

Vite未來規(guī)劃

目前穩(wěn)定，沒重大改動，穩(wěn)定ssr實現(xiàn)；很多基于vite做底層的生態(tài)在興起，vite會做成對前端生態(tài)有幫助的東西。

pinia會替代vuex嗎

很大概率，都是core team成員，討論結(jié)果未來形態(tài)會很像pinia，新東西都寫在pinia里，如果開發(fā)一個新項目，如果使用ts，推薦使用pinia。

如何評價自由職業(yè)

自由很理想，很爽，命運掌握在自己手里；同時壓力在自己身上，沒有公司兜底，選擇了就要做好承受這些的準(zhǔn)備。

---

最近組建了一個江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信 江西?拉你進群。

推薦閱讀

1個月，200+人，一起讀了4周源碼
我歷時3年才寫了10余篇源碼文章，但收獲了100w+閱讀

尤雨溪寫的100多行的“玩具 vite”，十分有助于理解 vite 原理

老姚淺談：怎么學(xué)JavaScript？

我在阿里招前端，該怎么幫你（可進面試群）

·················?若川簡介?·················

你好，我是若川，畢業(yè)于江西高校?，F(xiàn)在是一名前端開發(fā)“工程師”。寫有《學(xué)習(xí)源碼整體架構(gòu)系列
從2014年起，每年都會寫一篇年度總結(jié)，已經(jīng)寫了7篇，點擊查看年度總結(jié)。
同時，最近組織了源碼共讀活動

識別上方二維碼加我微信、拉你進源碼共讀群

今日話題

略。歡迎分享、收藏、點贊、在看我的公眾號文章~

總結(jié)

以上是生活随笔為你收集整理的尤大直播分享：vue3生态进展和展望的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。