建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
vue-next/runtime-core源碼閱讀指南詳解-創(chuàng)新互聯(lián)
寫在前面
最近又抽時間把 vue-next/runtime-core 的源碼陸陸續(xù)續(xù)地看完了，期間整理了很多筆記，但都是碎片化的。本來是想整理一下，寫成一篇文章分享出來的，但是感覺最終的成果物只能是一篇篇幅巨長的解析文，就算我一行一行的把源碼加上注釋，其閱讀體驗也會很差，因為每個人讀代碼的習(xí)慣不同，思路不同。正所謂拋磚引玉，所以，我覺的寫一篇向?qū)淖鳛檫@塊磚應(yīng)該是足夠了，希望可以幫助到想看源碼但覺得無從看起、無從下手的讀者。
另一方面，也算是給自己挖一個坑，因為這篇文章中涉及到的很多內(nèi)容，三言兩語肯定是說不清的，這就意味著之后必須要寫其他文章來填補這些空白。我會盡可能的將高內(nèi)聚的模塊整理到一起，然后再分享出來，盡量避免陷入羅列代碼的境地，從而提高文章質(zhì)量吧。
閱讀筆記我托管在語雀上，不嫌亂的也可以看這里。
準備工作
工欲善其事，必先利其器，要看源碼，拿寫字板來看肯定是不行的（當然也不排除牛人）。你所需要的就是一個支持代碼跳轉(zhuǎn)的編輯器即可，我用的是 VSCode，當然了，如果你用 VIM、Sublime 也是可以的。
另外還需一些儲備知識：
- 由于是閱讀 vue-next 的代碼，并且是 pre-alpha 的版本，這就要求你對之前 vue 有一定的了解，如果是第一次接觸，我覺的閱讀源碼的意義也不是很大
- 需要熟練掌握 debug 的基礎(chǔ)技巧和流程，通過 debug 的方式來看代碼有兩個好處
- debug 過程有清晰地調(diào)用棧記錄
- 各種作用域下的變量一目了然
- 需要對 typescript 有一定掌握程度，最起碼給知道 interface、enum 等概念
如何閱讀
一般有三種途徑：
- 直接看
- 通過單元測試的可執(zhí)行代碼
- 自己編寫的可執(zhí)行代碼
這里推薦第二種方式，因為單元測試是官方團隊維護的，質(zhì)量肯定有保證，二來單元測試一般都很簡單，同時帶有注釋，這有利于我們理解代碼。
由于 vue-next 使用 jest 進行單元測試，在 vscode 中安裝 Jest 插件即可，它支持行內(nèi) debug lens 快捷入口，方便直接對某條單元測試進行 debug。
不過要注意配置一個自定義選項：
"jest.debugCodeLens.showWhenTestStateIn": [ "fail", "unknown", "pass", // 注意這里 ]
網(wǎng)站名稱：vue-next/runtime-core源碼閱讀指南詳解-創(chuàng)新互聯(lián)
文章出自：http://www.dlmjj.cn/article/cedssg.html
