最近這兩年，Vue.js 3.0 的消息就開始流傳，一直到去年 2019 年 Vue.js 的作者尤雨溪在 VueConf 2019 上海的演講中，讓我們開始看到 Vue.js 3.0 的開發進展。
今天就讓我們提前告訴你， Vue.js 3.0 改版前你不能不知道的五件事！
文章目錄
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 改版的五件事
１. Object.define Property → Proxy
這次 Vue.js 3.0 底層改寫，使用 ES6 Proxy 語法代替 Object.define Property 來做數據的響應式。Proxy 只是對你的原始對象做一個 Proxy，不需要對原始對象做太多的變動，初始化的性能相較下比較好也比較穩定。簡單來說，這賦予 Vue.js 觀察資料變化的能力。
２. Virtual DOM 重構
這次也會重構 Virtual DOM，因為傳統 Virtual DOM 的性能跟模版大小正相關，跟動態節點的數量無關。在一些組件整個模版內只有少量動態節點的情況下，會造成性能上的浪費。
而在這次改版中，將會優化 Virtual DOM 的演算法，並導入『Block tree (區塊樹)』的概念：
- 將模版基於動態節點指令切割為嵌套的區塊
- 每個區塊內部的節點結構是固定的
- 每個區塊只需要以一個 Array 追踪自身包含的動態節點
也就是說，這次的改版的更新性能會由傳統的跟模版整體大小正相關提升為與動態內容的數量相關，這樣的改變會讓網頁的性能整整快了６倍以上！
３. 捨棄 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 還有哪些好處呢？
- setup 讓相關的邏輯更容易放在一起
- state 跟 methods 是透過變數的方式來宣告，可以大幅減少this指向的問題(在 setup 內部你還是可以使用 this，但大部分時候不會需要)
- 共用組件之間的邏輯共用可以更加簡單
- 組件的效能提升
- 減少初學者開發門檻
那 Function-based API 要如何使用呢？
首先到 Vue.js 3.0 的官方文件找到最新公布的文件 (https://v3.vuejs.org/)
在 installation 的部分，提供了 CDN、NPM，甚至可以用最新的 vue CLI 來開發 Vue.js 3.0。
４. Template 提供更好的靜態優化
這點也是 Function-based 跟 React Hooks 的差異。React Hooks 和 JSX 的搭配簡潔是它的優點之一，但是當資料被更改的時候，造成組件會重新渲染，產生資源的消耗，但是 Function-based 就不一樣，為什麼作者會說「 Template 提供更好的靜態優化」呢？
是因為當今天如果資料變動的時候，setup 僅執行一次，而 JSX 每次渲染都會執行，Template 不會做無謂的更新，不會進行重新渲染，在組件的更新上面效能會比較好！
５. 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個不同的版本
- 兼容版本：同時支援 3.0 API 和所有 2.x 選項。
- 標準版本：只支援 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？
常見問答 Q&A
Q1：Vue3 都還沒 Release，課程會不會有版本不適用問題？
A1：不用擔心，課程內容將以「官方正式版本」為準，講師也會用心更新課程影片，等於是讓你買下一堂終身受用的課程！
Q2：我的專案想升級成 3.0 該怎麼辦，要大改嗎？
A1：Vue 的開發團隊將同時支援 3.0 API 和 2.x 所有選項；也就是說 3.0 中還是可以使用 2.x 的 API。
Q3：沒有程式基礎可以直接學習 Vue 嗎？
A3：Vue 是 JavaScript 開發框架，會需要先學習 JavaScript 才能上手！如果沒有 JS 基礎的學員，可以先上 Mike 老師的現代 JavaScript 職人之路喲！
Q4：如果我沒有學過 Vue 2 ，可以直接學 vue 3 嗎？
A4：可以喔！因為這門課程是從基礎開始，因此沒有學過Vue 2 的人直接來這裡學習Vue 3 也沒問題喔！
Hi 找我嗎？追蹤訂閱HiSKIO
- HiSKIO 嗨程式技能： 科技資訊文章、實用工具分享、新課程優惠領取
- Codefree：喝一杯咖啡，輕鬆學程式！
- HiSKIO LINE：叮咚！掌握最新資訊與優惠，現在就到 LINE 領200抵用券！
- HiSKIO YouTube：免費實用課程、工程師經驗分享
- 程式丼起來：不想一個人孤單寫 code ? 立即加入話題圈吧 !