Vue.js 3.0 即將改版,你還不知道這五件事?

最近這兩年,Vue.js 3.0 的消息就開始流傳,一直到去年 2019 年 Vue.js 的作者尤雨溪在 VueConf 2019 上海的演講中,讓我們開始看到 Vue.js 3.0 的開發進展。

今天就讓我們提前告訴你, Vue.js 3.0 改版前你不能不知道的五件事!


👇本篇文章各章節👇

可以點擊有興趣的章節直接閱讀!

~那我們開始囉~

免費開啟訂閱】
等等...在開始之前,如果想要持續收到懶人包內容或是調查報告大公開…
免費開啟訂閱 👉 https://m.me/hiskio?ref=w12082588   

▍Vue.js 3.0 簡介

去年 2019 年 Vue.js 的作者尤雨溪在 VueConf 2019 上海的演講中 ,說出了 Vue.js 3 的設計目標:更小、更快、加強 TypeScript 支持、加強 API 設計一致性、提高自身可維護性以及開放更多底層功能。

隨著測試版的推送,今年 2020 年 7 月 Vue.js 官方宣布進入 RC 階段啦!也就是說幾乎不會再做太大的改變。已經離官方所訂的時間表越來越近啦!

※ 這邊幫各位補充一下,RC 階段 (Release Candidate):最終測試版本,可能成為最終的候選版本,如果沒有出現問題則可發布成為正式版本。

▍ Vue.js 3.0,你必須知道的五件事

這次我們整理了五點關於 Vue.js 3.0 改版,你必須知道的

1. Object.define Property → Proxy

這次 Vue.js 3.0 底層改寫,使用 ES6 Proxy 語法代替 Object.define Property 來做數據的響應式。Proxy 只是對你的原始對象做一個 Proxy,不需要對原始對象做太多的變動,初始化的性能相較下比較好也比較穩定。簡單來說,這賦予 Vue.js 觀察資料變化的能力。

2. Virtual DOM 重構  

這次也會重構 Virtual DOM,因為傳統 Virtual DOM 的性能跟模版大小正相關,跟動態節點的數量無關。在一些組件整個模版內只有少量動態節點的情況下,會造成性能上的浪費。

而在這次改版中,將會優化 Virtual DOM 的演算法,並導入『Block tree (區塊樹)』的概念:

❶ 將模版基於動態節點指令切割為嵌套的區塊
❷ 每個區塊內部的節點結構是固定的
❸ 每個區塊只需要以一個 Array 追踪自身包含的動態節點

也就是說,這次的改版的更新性能會由傳統的跟模版整體大小正相關提升為與動態內容的數量相關,這樣的改變會讓網頁的性能整整快了6倍以上!

3. 捨棄 Class API

Vue.js 3.0 改版其中一個主要設計目標是加強對 TypeScript 的支持。而原本開發團隊期望通過 Class Component 來達成這個目標,但他們認為 Class 並不是解決這個問題的正確路線,所以在 Vue.js 3.0 捨棄 Class Component,選擇了 Function-based API。

和 Class Component 相比,Function-based API 對 TypeScript 有更好的類型推導支持以及更靈活的邏輯復用能力,而且 Tree-shaking 也比較友好,代碼更容易被壓縮,實現更靈活且無副作用的複用代碼。

那 Function-based API 還有哪些好處呢?
1. setup 讓相關的邏輯更容易放在一起
2. state 跟 methods 是透過變數的方式來宣告,可以大幅減少this指向的問題
(在 setup 內部你還是可以使用 this,但大部分時候不會需要)
3. 共用組件之間的邏輯共用可以更加簡單
4. 組件的效能提升
5. 減少初學者開發門檻

那 Function-based API 要如何使用呢?
首先到 Vue.js 3.0 的官方文件找到最新公布的文件 (https://v3.vuejs.org/)
在 installation 的部分,提供了 CDN、NPM,甚至可以用最新的 vue CLI 來開發  Vue.js 3.0

4. Template 提供更好的靜態優化

這點也是 Function-based 跟 React Hooks 的差異。React Hooks 和 JSX 的搭配簡潔是它的優點之一,但是當資料被更改的時候,造成組件會重新渲染,產生資源的消耗,但是 Function-based 就不一樣,為什麼作者會說「 Template 提供更好的靜態優化」呢?

是因為當今天如果資料變動的時候,setup 僅執行一次,而 JSX 每次渲染都會執行,Template 不會做無謂的更新,不會進行重新渲染,在組件的更新上面效能會比較好!

5. Vue.js 3.0 和 React 相比

那你說 Vue.js 3.0 看起來就像 React,為什麼不乾脆直接使用 React?Vue.js 3.0中 template 的使用跟優勢完全沒有改變, React 仍然使用 JSX。 Vue.js 的漸進式的概念依然不變,門檻還是比React低,且 Vue Function-based 組件更新效能比較好。

況且 Function-base跟 React Hooks 有同樣的邏輯組合、復用能力,但只調用一次,符合 JS 直覺,也沒有閉包變量問題、沒有內存/GC 壓力,且不存在內聯回調導致子組件永遠更新的問題。

▍ 結論

很多人會問說那現在 Vue.js 3.0 出來後我的專案想升級怎麼辦? 難道要大改嗎?其實 vue 開發團隊計劃提供2個不同的版本
1. 兼容版本:同時支援 3.0 API 和所有 2.x 選項。
2. 標準版本:只支援 3.0 API 和部分 2.x 選項。

也就是說 3.0 之中還是可以使用 2.0 的 api,不過具體怎麼做還是得看官方正式釋出後才能知道!

要特別注意的是,這次 Vue.js 3.0 不支援 IE,但目前不確定有沒有支援 edge,這也要等官方正式公布才能確定。

以上就是我們整理出 Vue.js 3.0 準備改版,你必須知道的五點!

這次的改版捨棄 Class Component,選擇了 Function-based API 可能會造成比較大的改變,雖然這次改版有些人覺得恨 React 蠻像,但我們認為能將 React 的優點截取出來並開發出更好的 Function-based API,互相學習成長並持續優化才能開發者長期使用!

▍ 哪裡可以學最新 Vue.js 3.0?

【課程預購中...】
HiSKIO 現在和 Mike 老師推出了 2020 最新 Vue.js 3.0 的課程
2020 Vue 3 專業職人完成組合 | 入門篇+進階篇+加值篇
👉🏻https://bit.ly/34QeqM5​ 

▍零基礎怎麼辦?​不用擔心!
JS 職人之路系列 + Vue3 專業職人之路系列​
帶你完整從 0 到 1 👉 https://bit.ly/3gJHA20 

常見問答 Q&A

Q1:Vue3 都還沒 Release,課程會不會有版本不適用問題?
A:不用擔心,課程內容將以「官方正式版本」為準,講師也會用心更新課程影片,等於是讓你買下一堂終身受用的課程!

Q2:我的專案想升級成 3.0 該怎麼辦,要大改嗎?
Vue 的開發團隊將同時支援 3.0 API 和 2.x 所有選項;也就是說 3.0 中還是可以使用 2.x 的 API。

Q3:沒有程式基礎可以直接學習 Vue 嗎?
Vue 是 JavaScript 開發框架,會需要先學習 JavaScript 才能上手!如果沒有 JS 基礎的學員,可以先上 Mike 老師的現代 JavaScript 職人之路喲!

Q4:如果我沒有學過 Vue 2 ,可以直接學 vue 3 嗎?
可以喔!因為這門課程是從基礎開始,因此沒有學過Vue 2 的人直接來這裡學習Vue 3 也沒問題喔!

【私訊告訴我們】
➤ 如果大家還有什麼想看的懶人包,歡迎大家私訊 HiSKIO 臉書粉絲團
👉
https://m.me/hiskio
【歡迎追蹤訂閱】HiSKIO 嗨 程式技能」科技資訊文章、實用工具分享、新課程優惠領取
「Hi 直播學程式」不定期專題直播
「HiSKIO youtube頻道」免費實用課程、工程師經驗分享
最懂初學者的「F5學程式」
不想一個人孤單寫 code ? 來活力滿點的「程式丼起來」加入話圈吧 !

▍你許願我實現 – 課程許願池

HiSKIO 目前沒有開設你需要的程式課程嗎?
那就點擊連結來許願吧!還可以額外獲得實用懶人包 + 精選文章喔!
👉 https://m.me/hiskio?ref=w11701944

﹏﹏﹏﹏﹏﹏﹏﹏﹏
​​​十四大領域任你挑!
​​﹋﹋﹋﹋﹋﹋﹋﹋﹋
電腦科學 | 網站前端 | 網站後端 | 手機應用 | 桌面應用 | 人工智慧 | 微軟產品 | 雲端服務 | 遊戲開發 | 資訊安全 | 程式交易 | 介面設計 / 多媒體 | 維運 / 測試 | 資料庫 / 資料科學
﹏﹏﹏﹏﹏﹏﹏﹏﹏
你將可以獲得這些!
​​﹋﹋﹋﹋﹋﹋﹋﹋﹋
1. 有機會讓老師幫你打造符合需求的課程
2. 課程上架時獲得『只屬於你』的專屬優惠
3. 超實用懶人包 / 精選文章
4. 學會帶得走的專業技能,職場競爭力 UP!


▍更多懶人包與調查報告

Facebook Comments

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。