Vue 在開始工作之前，需要對 HTML 模板進行一次編譯，轉換成 AST。一說到 AST 有人可能就害怕了，其實不必，你把它看做是一個 JS 對象，使用了樹這種數據結構，它在這裡的作用就是把 HTML 中每個節點轉換成一個 JS 對象，後面會通過這個 JS 對象來做更多的工作。
那如何才能查看 Vue 編譯後的 AST 呢？
在 Vue3 源碼中，有一個 package（compiler-core），它負責把 HTML 模板轉換成 AST，並生成渲染函數。它可以被單獨作為一個 npm 包來使用，通過使用這個 npm 包即可查看 AST 和渲染函數。我們通過在前面創建的項目 parcel 可做到零配置寫前端項目中添加這個 npm 包。
yarnadd @vue/compiler-core
執行完後，創建一個 JS 文件來使用它：
/** * @file day3-compiler-core.js * @author 素燕 * @description vue3 模板編譯，來自公眾號素燕 */import { baseCompile} from'@vue/compiler-core';let app = document.getElementById('suyan-app');let ret = baseCompile(app.innerHTML);console.log(ret);
suyan-app 這個 ID 選擇器對於的 HTML 模板為：
<divid="suyan-app"><pclass="wrap"><h1>和素燕一起學前端{{ des }}</h1><ahref="http://lefex.gitee.io/">前端小課</a></p></div>
在瀏覽器裡打開我們創建的頁面，可以看看 AST：
通過 ast，我們看下其中某個節點：
生成的渲染函數：
const _Vue = Vuereturnfunctionrender(_ctx, _cache) {with (_ctx) {const {createVNode: _createVNode,toDisplayString: _toDisplayString,Fragment: _Fragment,openBlock: _openBlock,createBlock: _createBlock } = _Vuereturn (_openBlock(), _createBlock(_Fragment, null, [ _createVNode("p", { class: "wrap" }), _createVNode("h1", null, "和素燕一起學前端" + _toDisplayString(des), 1/* TEXT */), _createVNode("a", { href: "http://lefex.gitee.io/" }, "前端小課"), _createVNode("p") ], 64/* STABLE_FRAGMENT */)) }}
通過最終的渲染函數，可以看出 Vue 下一步該創建 VDOM 了。其實整個編譯過程用到了編譯原理的思想。
本文的重點是希望能夠給大家普及一下如何查看 AST 和 渲染函數，以幫助想要學習 Vue3 源碼的朋友提供一個思路。如果你也在學習 Vue 核心編程思想，可以加我微信 wsy9871 共同交流。
大家加油！
素燕《前端小課》
幫助 10W 人入門並進階前端
官網：https://lefex.gitee.io/