如何除錯Vue3原始碼？

最近想系統學習一下vue3的源**，本篇內容記錄和分享一下，如何除錯vue3的源**。

github雖好，但是對於國內使用者，總還是有點敵意，訪問的時候經常進不去，或者很慢，我在公司訪問github時好好的，但在家就死活進不去，使用了**也一樣，所以啊，如果vue官方倉庫能在gitee上維護乙個倉庫就太棒了。

這裡，我提供乙個自己在gitee上找的私人上傳的vue3原始碼倉庫，希望能幫助跟我一樣進不去github或者在github上clone失敗的同學。

現在，訪問以上位址將原始碼clone到本地就可以了

如果想要在原始碼中打斷點進行除錯，需要滿足2個條件：

如何啟用source map？

在終端中執行yarn dev命令，進行打包：

yarn dev

打包後的檔案，在下圖所示目錄：

如下圖所示的檔案，隨便點乙個，使用live-server開啟。

如果沒有安裝live-server，需要先裝一下

執行起來後，可以看到示例中的demo已經可以正常訪問了，如下圖所示：

重點看下圖中控制台中的地方，這裡我們在source下，已經可以看到，packages目錄下的原始碼了。

，之後我們就可以在devtools中，對原始碼進行斷點除錯了。

如下圖所示：

最後，這裡我們對比一下，沒用啟動 source map 時，devtools的情況:

可以看到，如果沒有啟用 sourcemap，是無法除錯原始碼的。

好了，就記錄到這裡了，想要除錯原始碼的同學，可以開整了。

vue3 瀏覽器怎麼除錯 Vue 3 原始碼導讀

5號凌晨，尤雨溪公布了 vue 3 源 話不多說，我們趁熱對 vue 3 原始碼進行一些簡要的分析。如果你還沒有閱讀過 composition api rfc，可能無法完全看懂下面的內容。相容性目前打包後的 是 es2015 不支援 ie 11。對 typescript 的使用 目前的 98 以上使...

vue3原始碼學習

dev node scripts dev.js sourcemap div src dist vue.global.js script 初始化 vue2 new vue mount mount掛載 const vue 解構出來 mount script 除錯 f12 sources 設定斷點 ste...

Vue3讀原始碼 1

要讀懂原始碼還是要有一定的基礎的，在此就預設是會的。我使用的工具是vscode，廢話不多說，首先看最外層的函式 var vue function exports 可以看到，vue是 裡的自執行函式的返回值exports，是個物件。exports是函式接收乙個空物件引數然後經過函式處理後返回的。那麼函...