vue-next已正式更名為core,Vue3即將轉正迎來春天

語言: CN / TW / HK

theme: cyanosis

「2022 年什麼會火?什麼該學?本文正在參與“聊聊 2022 技術趨勢”徵文活動 」

要說2022年什麼會火?Vue3將首當其衝!

原因是,這兩天vue-next專案以正式更名為core,標誌著Vue3即將轉正迎來春天

可以看到現在vuejs Pinned的專案

image.png

  • core :26.9k stars,就是之前的vue-next,即Vue3 雖然安裝方式還是npm init [email protected]yarn create vue,但是以更名為core,說明它已經成為近期最核心的寵兒
  • docs Vue3的中文文件,1.5k stars
  • create-vue :522 stars,是一個新專案,用一種更簡便的方式建立Vue專案

比如建立Vue3專案使用npm init [email protected],建立Vue2專案可使用npm init [email protected] - router :Vue的官方路由,之前的vue-router-next,1.7k stars, - pinia :4.9k stars,是Vue新一代的狀態管理器,像是Vuex5.x的實現,掛在這不知道會是否想用它取代之前的Vuex - devtools :vue的除錯工具,21.6k stars

可以看出所有都在打輔,視乎所有的目光都聚焦於Vue3。也是並且經過一年多沉澱,Vue3生態已經相當穩定了,相信2022越來越多的公司也會選擇Vue3

也許你的同事會問:為什麼用Vue3啊?用之前的Vue2不是挺好的嗎?

我思考了許久,確實老專案可以考慮不用,但是新專案可以考慮上了,我簡單小結為以下6點Vue2所沒有的優勢

1. Vue3使用TS重構了專案,獲得更好的型別支援

2. 重構了響應式系統

Vue3使用Proxy替換Object.defineProperty,重構了Vue的響應式系統;解決了Vue2.x中存在的響應性問題

包括: - 可的直接監聽陣列型別的資料變化 - 監聽的目標為物件本身,不需要像Object.defineProperty一樣遍歷每個屬性,有一定的效能提升 - 更強大的攔截功能,攔截器包括getsethasdeletePropertyownKeysgetOwnPropertyDescriptordefinePropertypreventExtensionsgetPrototypeOfisExtensiblesetPrototypeOfapplyconstruct13種

3. 引入了Composition API

vue3.0中引入了composition API,專門用於解決功能、資料和業務邏輯分散的問題,使專案更益於模組化開發以及後期維護

它的核心是setup函式,這樣做的好處是,當應用變得複雜一點時,我可以將功能對應的資料和業務邏輯抽離出來,需要是import,以至於更好的邏輯複用和程式碼組織

4. 優化了Virtual DOM

包括: - 模板編譯時的優化;將一些靜態節點編譯成常量 - slot優化;將slot編譯為lazy函式,將slot的渲染的決定權交給子元件 - 模板中內聯事件的提取並重用(原本每次渲染都重新生成行內函數)

5. 更好的Tree shaking

引入尤大的原話:

Tree-shaking其實就是把無用的模組進行“剪枝”,很多沒有用到的API就不會打包到最後的包裡

事實上,Tree shaking並不是Vue3新增的東西,它是打包工具如webpack或者rollup的功能,但是由於Vue3程式碼結構調整,把vue本身當一個物件去操作,這樣的結果是,使得一些可能不會用到的功能就可以被tree shaking掉,從而使得體積更小

主要原理:依賴es6的模組化的語法,將無用的程式碼(dead-code)進行剔除

6. <script setup>

<script setup>是Vue3.2新增的語法糖,消除我們在使用compositionAPI時的心智負擔,讓我們沒有理由不使用compositionAPI

優勢:

  • 更簡潔
  • 能夠使用純TS宣告props和丟擲事件
  • 更好的執行時效能和IDE型別推斷效能

以上就是對比Vue2,Vue3的幾個優勢

那麼問題來了

你覺得2022年Vue3會迎來春天、成為主流選擇之一嗎?

A.主流 B.非主流

歡迎留言,交流~