寫在前面

創新互聯長期為1000多家客戶提供的網站建設服務，團隊從業經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態環境。為集美企業提供專業的網站建設、成都網站設計，集美網站改版等技術服務。擁有10余年豐富建站經驗和眾多成功案例,為您定制開發。

最近又抽時間把 vue-next/runtime-core 的源碼陸陸續續地看完了，期間整理了很多筆記，但都是碎片化的。本來是想整理一下，寫成一篇文章分享出來的，但是感覺最終的成果物只能是一篇篇幅巨長的解析文，就算我一行一行的把源碼加上注釋，其閱讀體驗也會很差，因為每個人讀代碼的習慣不同，思路不同。正所謂拋磚引玉，所以，我覺的寫一篇向導文作為這塊磚應該是足夠了，希望可以幫助到想看源碼但覺得無從看起、無從下手的讀者。

另一方面，也算是給自己挖一個坑，因為這篇文章中涉及到的很多內容，三言兩語肯定是說不清的，這就意味著之后必須要寫其他文章來填補這些空白。我會盡可能的將高內聚的模塊整理到一起，然后再分享出來，盡量避免陷入羅列代碼的境地，從而提高文章質量吧。

閱讀筆記我托管在語雀上，不嫌亂的也可以看這里。

準備工作

工欲善其事，必先利其器，要看源碼，拿寫字板來看肯定是不行的（當然也不排除牛人）。你所需要的就是一個支持代碼跳轉的編輯器即可，我用的是 VSCode，當然了，如果你用 VIM、Sublime 也是可以的。

另外還需一些儲備知識：

• 由于是閱讀 vue-next 的代碼，并且是 pre-alpha 的版本，這就要求你對之前 vue 有一定的了解，如果是第一次接觸，我覺的閱讀源碼的意義也不是很大
• 需要熟練掌握 debug 的基礎技巧和流程，通過 debug 的方式來看代碼有兩個好處
  • debug 過程有清晰地調用棧記錄
  • 各種作用域下的變量一目了然
• 需要對 typescript 有一定掌握程度，最起碼給知道 interface、enum 等概念

如何閱讀

一般有三種途徑：

• 直接看
• 通過單元測試的可執行代碼
• 自己編寫的可執行代碼

這里推薦第二種方式，因為單元測試是官方團隊維護的，質量肯定有保證，二來單元測試一般都很簡單，同時帶有注釋，這有利于我們理解代碼。

由于 vue-next 使用 jest 進行單元測試，在 vscode 中安裝 Jest 插件即可，它支持行內 debug lens 快捷入口，方便直接對某條單元測試進行 debug。

不過要注意配置一個自定義選項：

"jest.debugCodeLens.showWhenTestStateIn": [
  "fail",
  "unknown",
  "pass", // 注意這里
]

文章題目：vue-next/runtime-core源碼閱讀指南詳解-創新互聯
網頁網址：http://vcdvsql.cn/article36/cedssg.html

成都網站建設公司_創新互聯，為您提供網站建設、網站設計、網站制作、全網營銷推廣、移動網站建設、網站營銷

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯