前言 ​

上次所使用的的方法是单步调式法，这次从package.json去分析我们的入口文件,原一开始的时候，都是从这里看到的项目的基本配置的信息的，很少去用单步调式法去分析，也是听村长这样调式了一波学习到了。

package.json ​

这个执行打包的时候，真正执行的脚本是scripts/dev.js，发生一个非常重要的文件

在dev.js文件中就可以获取到我们的入口文件了,走到这的时候，我们发现没有录可以走了，这个是时候我们应该去看打包配置文件，一般吸纳按个webpack、vite这些都是有打包配置文件的

从rollup.config.js中可以得到package目录，打包格式cjs、es、iife，entryFile

这里是个正则表达式，去校验是都有-runtime的字样，决定入口文件。由于dev上没有带，所以是index.ts

index.ts ​

这个就是入口文件的内容了

现在我们写个案例来调试一波

 <div id="app">
     <h1>{{title}}</h1>
 </div>
 <script src="../dist/vue.global.js"></script>
 <script> 
     const { createApp }  = Vue
     createApp({
         data(){
             return{
                 title:"你好"
             }
         }
     }).mount("#app")
 </script>

 <div id="app">
     <h1>{{title}}</h1>
 </div>
 <script src="../dist/vue.global.js"></script>
 <script> 
     const { createApp }  = Vue
     createApp({
         data(){
             return{
                 title:"你好"
             }
         }
     }).mount("#app")
 </script>

运行在浏览器，打开控制台，Ctrl+p输入vuesrcindex，就会自动过滤出来了。

再教大家一个学习方法，可以利用调用栈CallStack，执行的顺序都一览无余都在上面了

这样旧完全可以看到是谁调用了compileToFunction

接下来的顺序就跟第一期的顺序是一样的了：package/runtime-dom/index.ts,里面的createApp方法，利用vscode的Ctrl+鼠标点击自动跳转了。

兼容vue2

提问: compileToFunction何时调用 ​

finishComponentSetup方法在没有render函数的时候，就触发了。这就是为为什么组件没有render函数也能渲染出来

data和setup哪个优先级高 ​

setup优先级高

总结 ​

时常复习好牢记