在平时开发中，我们都会写template，在vue底层，会将template编译成render函数。vue的编译原理相对复杂，本文的主要目标是找到编译主入口。
我们以debugger的方式找到编译文件的调试入口，感受debugger调试源码的乐趣。
ts
// 本例包含：div，注释，事件，插槽，v-if，组件等内容
<body>
// #app容器
<div id="app"></div>
<script>
// 定义父组件
const App = {
// template解析后执行，所有其中的响应式数据可以访问到
template: `<div class="myApp">
<!-- 这是注释文案 -->
<h3>编译原理</h3>
<button @click="flag = !flag">控制显示隐藏</button>
<div v-if="flag">
<p>{{ first + second }}</p>
</div>
<ChildComp v-else></ChildComp>
</div>`,
// setup函数先执行，返回的数据供模版编译时使用
setup() {
// 定义响应式数据
const first = Vue.ref('hi');
const second = Vue.ref(' bqb');
const flag = Vue.ref(true);
// 返回数据
return {
first,
second,
flag,
};
},
};
// 定义子组件
const ChildComp = {
template: `<div>子组件</div>`,
};
// 创建app实例
const app = Vue.createApp(App);
// 注册子组件，供模版编译时使用
app.component("ChildComp", ChildComp);
// 挂载app实例
debugger;
app.mount("#app");
</script>
</body>例子中通过const app = Vue.createApp(App)创建app实例，然后通过app.mount("#app")将app实例挂载到#app容器上。在app.mount方法中，会调用mountComponent方法。
1、mountComponent方法
以上是在渲染函数的mountComponent中找到了setupComponent副作用函数，这是组件渲染中组件实例、执行副作用函数和执行渲染函数中的第二步。
接着我们继续寻找编译入口。
2、finishComponentSetup方法
以上在finishComponentSetup中找到了compile$1（即 compileToFunction）方法，这就是编译的入口。
3、compileToFunction方法
const { code } = compile(template, opts)中将template和opts作为参数传入compile方法中，执行返回code。
再通过const render = new Function(code)()的方式，将code转成render函数。
4、baseCompile方法
到这里，我们就找到了编译时重要的三个流程：
- 生成 ast 树
- 优化树
- 生成 code
至此，我们就通过debugger的方式找到了编译的入口，并且找到了编译时重要的三个流程。
我们需要注意的是，每个截图右侧的Call Stack，可以让我们知道当前执行的方法的调用栈，方便我们找到当前执行的方法的调用者，以及各个函数之间的调用关系。