vue-next源码分析

[xlearns]

下载nvm更新node版本为16.5以上

• https://github.com/coreybutler/nvm-windows/releases

  nvm list
  nvm install xx
  nvm use xx

  下载pnpm

• npm install pnpm -g

package.json删除puppeteer因为太大了

• pnpm install

修改package.json得dev命令添加sourcemap

node scripts/dev.js --sourcemap

vscode 快捷

打开cmd ctrl+shift +c 文件搜索 ctrl+p

运行

• pnpm run dev
• 生成vue-next\packages\vue\dist文件既成功

查看例子【vue-next\packages\vue\examples\component

断点

• 进入source面板、
• ctrl+o 搜索要调试得页面【todomvc.html】
• 找到入口文件【createApp】并打断点
• 刷新利用单行步入【f11】分析代码
• 右键：边栏中显示

package关系

1.vue 2.compiler| runtime-dom | reactive 3.runtime-dom->runtime-core【通用代码】

• 初始化：vue->runtime-dom

初始化流程

• 实例创建 createApp
• 挂载 mounte

[xlearns]

createApp

mounted