3.1.1　代码调试

依赖包安装完成后即可运行vue代码，执行npm run build打包最新的代码。完成打包后可以在packages/vue/dist内找到对应文件，打包结果如图3.3所示。

图3.3　打包结果

完成打包后，新建html文件并引入编译好的vue.global.js文件，在html文件内实现简单的内容：渲染一个按钮和提示语，单击按钮后可以反转提示语的字母位置。该demo实现十分简单，但是通过该操作可以帮助读者探究Vue3内部运行原理，覆盖Vue3的核心逻辑。整体代码如下：

上述代码使用了Vue3的createApp（）函数和reactive（）函数，createApp（）函数完成组件的初始化、挂载、更新和内部setup（）函数执行等过程。reactive（）函数完成内部响应式数据的实现。该demo实现的功能很简单，但覆盖了整个Vue3的核心逻辑。

上述页面完成后，即可在浏览器打开页面进行调试。查看Source标签页可以发现Vue3源码全在一个文件内不利于阅读和调试，需手动开启sourceMap。