Vue.js 3.x 源碼解析先導

前言

2018 年 6 月我在慕課網發佈了 Vue.js 2.x 的源碼解析課程 《Vue.js 源碼全方位深刻解析》，同時也開源了課程配套電子書。時隔一年多，Vue 官方也開源了 Vue.js 3.x，那麼在不久的未來，我也會系統化地作 Vue.js 3.x 的源碼分析，同時更新個人這門課程視頻以及電子書。

Vue.js 3.x 源碼剛開源不久，不少人都很是興奮，我也不例外。我寫下這篇文章做爲 Vue.js 3.x 源碼解析課程的先導片，和你們聊聊我對 Vue.js 源碼的一些感悟。

聊聊 Vue.js 3.x

Vue.js 3.x 目前的狀態

Vue.js 3.x 目前處於 Pre-Alpha 的狀態，從 Vue 官方的 Roadmap 來看，2019 年 Q3 結束前開源 Vue 3.x 的源碼，Q4 除了繼續完善 Vue.js 核心源碼以外，還要補齊周邊的生態建設：如 vue-router、vuex、vue-cli、Vue Devtools、JSX 等，在 Q4 結束前纔會發佈 Alpha 版本。可是 Alpha 版本也只是內部測試版本，以後還要經歷 Beta 對外測試版本，RC 候選發佈版本、最後纔會到正式的 Realase 版本，因此距離你們在生產環境投入使用還有很長的時間。那麼這段時間，對於 Vue.js 3.x 我能夠作哪些事情呢。

Vue.js RFC

Vue.js 官方設立 RFC 的初衷是爲了讓 Vue.js 自己的開發流程更加規範化，當有一個新功能的想法出現，會先發布一份 RFC 的提案，由社區在一塊兒討論，當提案經過後再去開發實現。

Vue.js 3.x 在開發以前也發佈了多份 RFC 提案，其中討論比較多的是 Vue.js 3.x 關於組件的寫法，由最初的 Class-API 提案被廢棄到以後熱烈討論的 Function-based component API，再到最後確認的基於 Function-based component API 修訂的 Composition API，經歷了很長一段的時間，期間社區出現了很多反對的聲音，好比 「和 React 更像了，爲啥我不直接用 React」、「Class API 更好」、「Vue.js 變得一點都不簡單了」 等等，官方都作了很好的迴應，所以學習 Vue.js 3.x，你應該先去學習這份 RFC。

經過這份 RFC 的學習，你會大體瞭解 Vue.js 3.x 組件的寫法、詳細設計、甚至是一些」缺點「。Vue.js 3.x 摒棄了 2.x Options API，擁抱了 Composition API，爲了更好的邏輯複用、代碼組織以及更好的類型推導。

Vue.js 3.x 嚐鮮

Vue.js 3.x 源碼已經開放，雖然沒有發佈，可是咱們能夠 clone 下來，安裝好相關依賴，構建一份打包後的代碼爲本身所用。

在閱讀完 Composition API 的 RFC 後，咱們已經對 Vue.js 3.x 組件的寫法有了必定了解，而且 2.x 的大部分 feature 3.x 都已經支持，咱們用 3.x 寫一個簡單的 demo 問題應該不大。我前段時間就基於 Vue 3.x 寫了一個 todomvc 的 demo，感興趣的同窗能夠去 GitHub clone 下來跑跑看看。

在寫 demo 的時候我還遇到了 v-model 實現的坑，對源碼一番調試後大體定位了緣由，不過因爲牽涉到核心的改動會比較多，因此我和尤大反饋了一下（微信提 issue），官方很快就修復了這個問題。

Vue.js 3.x 源碼

Vue.js 3.x 源碼放出來的次日，社區就有出來源碼分析的文章，不過看了好幾篇都是在分析 Reactive 相關的 API，給人的錯覺好像 Vue 只有響應式同樣，甚至還有某些培訓機構也跟着蹭起了熱度。有些文章寫的仍是很不錯的，好比我記得掘金有一篇是教你們從單測看起，確實是一個很好的學習源碼的思路，但還有幾篇也未免有蹭熱度之嫌。對我而言，除了 Reactive，我更願意去關注 Setup 函數的初始化邏輯、Compile 過程的優化、Render 寫法的變化、以及 Patch 過程的優化。

Vue.js 3.x 源碼採用了 monorepo 的管理方式，採用 TypeScript 編寫，對於 Vue.js 的開發者而言，這種方式是更易於維護源碼的。若是你想學習 Vue.js 3.x 的源碼，首先你得學會 TypeScript。

對於大部分人而言，如今去看 Vue.js 3.x 的源碼還爲時過早了，主要是你如今還用不到，我以前在掘金髮布過一篇文章來聊聊源碼學習，如今還不是學習 Vue.js 3.x 源碼的好時機。

可是若是你是一個對技術很是有熱情的人，在早期去學習 Vue.js 3.x 源碼，甚至去參與 Vue.js 3.x 的開發共建，對本身的技術提高仍是有很大幫助的。

Vue.js 2.x 源碼過期了嗎

Vue.js 3.x 源碼開放了，不少小夥伴難免擔憂，我如今學習 Vue.js 2.x 的源碼過期了嗎？

成熟穩定的 Vue.js 2.x

Vue.js 2.x 從 16 年末發佈距今已接近 3 年，有無數大廠已經使用 Vue.js 重構和開發項目，Vue.js 2.x 的 npm 下載量每個月有 90 多萬，Jsdelivr CDN 每個月有 5 億次引用，Chrome DevTools 每週有 90 萬的活躍用戶。如此龐大的用戶量足以說明 Vue.js 是一個很是靠譜和成熟的框架，另外官網對 Issue、Pull Request 的響應也是比較快的，除了高達 97% 的單元測試以外，官方還嘗試作了一些迴歸測試。

咱們知道 Vue.js 是一個漸進式框架，除了官方提供的一些生態插件 vue-router、vuex、vue-cli 以外，社區還有很是多的優秀的輪子如 element-ui、cube-ui、vue-lazyload、vue-i18n 等，這些插件能很好地輔助咱們平時的業務開發。

升級的成本

Vue .js 2.x -> Vue.js 3.x 升級仍是有必定的成本的，雖說官方會出一個保留 Options API 的寫法的版本，可是未免還會有一些 breaking change 的，好比手寫 render 函數部分語法就已經發生了改變，模板寫法也會發生一些變化。將來應該會出一個代碼升級的指南，甚至會用工具幫咱們作一部分工做，可是大規模的產線項目作核心框架升級，仍是有至關大的成本和風險的。

若是你的業務代碼升級到 Vue.js 3.x，也就意味着你依賴的生態插件也須要升級到 Vue.js 3.x，好比 element-ui 這種大型項目，升級起來也是有至關大的工做量的，因此你須要先等到你依賴的生態插件升級到 Vue.js 3.x 而且穩定後，你才能考慮在你的業務中作框架升級。

Vue.js 1.x -> Vue.js 2.x 的升級彷佛沒有那麼麻煩，那是由於 Vue.js 1.x 的時候用戶規模還很小，生態也沒有起來，甚至不少公司直接上手的 Vue.js 2.x，並無歷史包袱。

痛點

Vue.js 1.x -> Vue.js 2.x 的升級變化仍是很明顯的，虛擬 DOM 在 Vue.js 2.x 中得以實現，它讓服務端渲染、跨端渲染成爲可能。咱們來看一下 Vue.js 3.x 的設計目標：更小、更快、增強 TypeScript 支持、增強 API 設計一致性、提高自身可維護性、開放更多的底層功能。對大部分用戶而言，更小更快是一個吸引點，對於 TypeScript 用戶而言，增強 TypeScript 支持是一個吸引點，可是這些能解決開發中的痛點麼？

除非 Vue.js 3.x 能解決 Vue.js 2.x 開發中的痛點（好比我這個項目有性能瓶頸，性能的提高能幫助我解決這個性能瓶頸），不然重構的成本和它來帶來的收益就是一個須要權衡的問題。另外考慮到 Vue.js 3.x 用了一些 ES6 的新特性如 Proxy，在瀏覽器兼容性這塊也是須要考慮的。

老闆一般是不會容許你作這種純技術重構的，若是你想用 Vue.js 3.x 作重構，必定要抓到痛點，把重構的收益和老闆說清楚。

雖然老項目用 Vue.js 3.x 重構會有很大的成本和風險，咱們也能夠在一些非核心的新項目中去嘗試新技術，固然這一切也是須要等待 Vue.js 3.x 正式發佈以及依賴的 Vue 插件都更新支持 Vue.js 3.x 才能夠。

結論

Vue.js 3.x 想全面替代 Vue.js 2.x 須要有至關長的路要走，將來至關長一段時間 Vue.js 2.x 仍然是主流，Vue.js 2.x 的源碼學習並無過期，若是你是一個 Vue.js 2.x 的使用者，就應該去學習 Vue.js 2.x 的源碼。

我應該學習源碼嗎

不少人都有困惑，我會使用不就好了嗎，爲何還要學習源碼呢？

學習源碼的好處

學習是爲了更好的工做，工做中不免會遇到一些問題，學習源碼最直接的好處是能幫你直接定位問題的根本緣由，從而幫助你解決問題。不少人抱怨加班多，不妨問問本身，有多少時間是在寫業務，多少時間是在寫（找） bug。快速定位問題解決 bug，能夠有效地提高你的工做效率，極可能就不用加班了，甚至會多出學習的時間，造成一個良性循環。

學習源碼能夠很好地鞏固基礎，修煉內功，提高技術。前端幾乎都會學習 JS 的基礎知識，如類型、變量、函數、做用域、閉包、原型鏈、event loop 等知識，但不少人很難把這些知識在實踐中運用自如，主要緣由仍是實踐的少了，大部分時間都在寫業務的膠水代碼。學習 Vue.js 這類框架的源碼，會不斷去鞏固這些知識點，若是你源碼看熟練了，那麼你的 JS 基礎就會更紮實。

學習源碼有助於你更好地理解所用的技術棧，更熟練地在工做中運用。好比你深刻學習了 Vue.js 的核心源碼，你會理解 Vue.js 框架產生的意義、Vue.js 的職責邊界、數據驅動的本質；你還會知道如何實現的組件化，在什麼生命週期應該作什麼事情，如何編寫 Vue.js 的插件，如何和其它第三方 JS 庫深度結合。你不再會問「如何用 Vue 實現 XXX」 的傻問題了。

學習源碼可讓咱們站在巨人的肩膀上，Vue.js 這麼優秀，尤大也是參考了不少其餘優秀源碼的實現，好比 Vue.js 2.x Virtual DOM 部分參考了 snabbdom，Vue.js 3.x Reactive 的實現參考了Meteor Tracker 和 salesforce/observable-membrane 等。咱們在閱讀的源碼的時候，也能夠把源碼中的優秀的設計思想、代碼實現吸納到咱們平時的開發工做中。

學習源碼還有一個偏功利的做用，應付面試。愈來愈多的公司在面試環節會考察候選人對所用技術棧實現原理的考察，主要目的仍是考察候選人的技術能力以及技術熱情和追求，由於一般對技術熱愛的人一般都會保持技術好奇，樂於探究所用到的技術棧的實現原理。可是每每以這個目的去學習源碼的同窗是學很差的，對源碼的理解很淺，甚至出現了死記硬背的狀況。因此學習好源碼能夠幫助咱們在面試中應答自如，可是咱們不該該爲了面試去學習源碼。

學源碼的時機

一般咱們去學習一個技術棧的源碼的時機是在咱們對他的使用已經很熟練的狀況，好比你是一個 Vue.js 的一年以上經驗的使用者，那麼你已經能夠去學習它的源碼了，這時候你的學習應該是系統化地學習。

當你工做中使用某一個新框架的時候遇到一個奇怪的問題，經過查閱文檔也未能解決，這個時候你也能夠去看源碼，固然這個時候並不須要系統地去學習，只須要把和你問題相關的源碼理解了，找到問題便可。固然想達到這一步就須要你有快速閱讀源碼定位問題的能力，這個能力也是在你不斷去閱讀大量優秀源碼過程當中鍛鍊的。

學不動了怎麼辦

源碼學習的好處咱們已經介紹了不少，可是源碼學習的自己是枯燥的，抽象的，它沒有直觀酷炫的效果，學習起來費腦子，是不少人直呼學不動的緣由。

其實學不動的主要緣由仍是由於沒掌握好的學習方法，好的方法能讓你事半功倍，正如我在來聊聊源碼學習 文章中提到的幾個方法，全盤瞭解、問題驅動、主線優先、參與共建、閱讀技巧、輔助資料。除了這些方法，根據我源碼課程中一些學的不錯的同窗的經驗，本身在學習的過程當中多記筆記，多在課程問答區提問，甚至最後本身產出源碼分析系列文章，都能很是好的輔助學習源碼。其實作這些事情都是不斷在幫助本身創建自信和成就感，激發學習興趣，把無趣的事情變得有趣和有意義。

課程後續計劃

源碼課程會等待 Vue.js 3.x 發佈正式版本且穩定後會開始準備從新錄製，仍然是電子書和視頻的方式。

從新錄製的源碼課程不只僅會講清楚源碼實現流程，還會多加入一些使用場景、設計緣由的分析。

翻新課程是在原課程的基礎上增長 Vue.js 3.x 的章節，已購買課程的同窗能夠繼續學習，無需購買新課程。

先學會用再學原理，所以在 Vue.js 3.x 正式發佈後，我會優先從新錄製 《Vue2.0開發企業級移動端音樂Web App》課程，一樣是免費升級喔。

音樂課程 + 源碼課程的從新錄製，是我明年的主要計劃，暫無計劃出新課程了。除了版本的升級，我會像《Vue.js2.5 + cube-ui重構餓了麼App》升級課程那樣儘可能往課程中加入一些新東西的，敬請期待~