"dev"
:"node scripts/dev.js --sourcemap"
>
}div>
src=
"../dist/vue.global.js"
>
script
>
>
// 初始化
// vue2: new vue().$mount//mount掛載
const
= vue //解構出來(}
}).mount()
script
>
f12->sources->設定斷點->step into next function call ->reveal in sidebar
vscode 開啟目錄： 使用 command+p 輸入目錄
scripts/dev.js
// 模組：預設vue
const target
// 打包格式，常見有umd(通用)/cjs(node)/esm(webpack) 在package.json未定義格式時，預設global，完整的格式
const formats
// 原始碼對映
const sourcemaps
// 包路徑 packages
const packagesdir
// 預設vue
const packagedir
// 預設入口是packages/vue/src/index.ts
const entryfile
// 不同格式配置 23行
const
packages/vue/src/index.ts
export((
...args)
=>
)//行32
function
ensurerender()
//行389
export
function createrenderer<
hostnode = renderernode,
hostelement = rendererelement
>
(options: rendereroptions
)
//2236 這就是返回的渲染器
return
// 2208 初始化走這裡
// 最終轉換方法還是patch
patch()
// 446
const patch: patchfn =
// 507 初始化預設從元件
processcomponent
//1209 初始化掛載元件
mountcomponent
//1234
// 1.建立元件例項
//1259
// 2.安裝元件：元件初始化
setupcomponent
(instance)
//1279
// 安裝渲染函式
setuprendereffect
//1341 ***effect，元件更新函式新增為***函式，將來如果資料發生變化，重新執行元件更新函式
//1361 獲取根元件的vnode
//1385 將根元件vnode轉換為dom
// 114
export((
)// 151
// vue2: vue.use(vuerouter) 靜態方法
use(),
)// 216
mount()
// 237
// 2.渲染器傳入的render方法將vnode轉換
render
(vnode, rootcontainer)
}
02-kinit.html
>
}div>
>
const
=(render)
=>
// 2.執行render
render
(vnode, container)}}
}}// 3.createrenderer
const
createrenderer=(
)=>
else
// 3.插入
insert
(child, parent)
}return
}// 2.renderer
const renderer =
createrenderer(,
createelement
(tag)
,insert
(child, parent)})
// 1.宣告vue
const vue =
} vue.(}
}).mount()
script
>
src=
"../dist/vue.global.js"
>
script
>
>
const
= vue
// 擴充套件函式，可以建立乙個畫布並插入到宿主元素中
createrenderer(,
insert()
,patchprops()
,})script
>
Vue3讀原始碼 1
要讀懂原始碼還是要有一定的基礎的，在此就預設是會的。我使用的工具是vscode，廢話不多說，首先看最外層的函式 var vue function exports 可以看到，vue是 裡的自執行函式的返回值exports，是個物件。exports是函式接收乙個空物件引數然後經過函式處理後返回的。那麼函...
如何除錯Vue3原始碼？
最近想系統學習一下vue3的源 本篇內容記錄和分享一下，如何除錯vue3的源 注意，vue3的原始碼是在這個 core目錄下，一些同學別一直找目錄為vue3的資料夾，那是找不到的哈。github雖好，但是對於國內使用者，總還是有點敵意，訪問的時候經常進不去，或者很慢，我在公司訪問github時好好的...
vue3 瀏覽器怎麼除錯 Vue 3 原始碼導讀
5號凌晨，尤雨溪公布了 vue 3 源 話不多說，我們趁熱對 vue 3 原始碼進行一些簡要的分析。如果你還沒有閱讀過 composition api rfc，可能無法完全看懂下面的內容。相容性目前打包後的 是 es2015 不支援 ie 11。對 typescript 的使用 目前的 98 以上使...