笔者在上一篇文章《debug一下,你就学会高效阅读开源项目代码~》中以 Vue3 源码调试配置为案例,给大家介绍了调试的基本配置以及强调了其在查看源码过程中的重要性。本文将使用调试的技巧,在不需要详细了解完整代码实现的前提下,快速了解 Vue3 的执行流程。
最简单的代码
众所周知,调用 Vue.createApp
方法便创建了一个 Vue3 应用,本文从这个方法入手,一步一步剖析该方法在源码中的实现,从而使得大家能够了解 Vue3 整体的执行流程。
首先,在源码目录创建 packages/vue/examples/hello.html
文件:
<script src="../dist/vue.global.js"></script>
<div id="demo">{
{text}}</div>
<script>
debugger
Vue.createApp({
data: () => ({
text: 'hello world'
})
}).mount('#demo')
</script>
代码功能非常简单:在页面中打印 hello world
字符串。这里在执行 Vue.createApp
前插入 debugger
代码,使得代码执行在 debugger
处暂停下来。
调试开始
这里还是贴一下调试的配置,如需更详细的了解调试原理和流程,请访问笔者上一篇文章:《debug一下,你就学会高效阅读开源项目代码~》。
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch hello",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"file": "${workspaceFolder}/packages/vue/examples/hello.html"
}
]
}
点击调试按钮,程序在 debugger
处暂停,然后执行到 Vue.createApp
处单步进入,断点进入到 packages/