查看 Vue3 模板编译后的 AST 和渲染函数

Vue 在开始工作之前，需要对 HTML 模板进行一次编译，转换成 AST。一说到 AST 有人可能就害怕了，其实不必，你把它看做是一个 JS 对象，使用了树这种数据结构，它在这里的作用就是把 HTML 中每个节点转换成一个 JS 对象，后面会通过这个 JS 对象来做更多的工作。

那如何才能查看 Vue 编译后的 AST 呢？

在 Vue3 源码中，有一个 package（compiler-core），它负责把 HTML 模板转换成 AST，并生成渲染函数。它可以被单独作为一个 npm 包来使用，通过使用这个 npm 包即可查看 AST 和渲染函数。我们通过在前面创建的项目 parcel 可做到零配置写前端项目 中添加这个 npm 包。

yarn add @vue/compiler-core

执行完后，创建一个 JS 文件来使用它：

/**
 * @file day3-compiler-core.js
 * @author 素燕
 * @description vue3 模板编译，来自公众号素燕
 */


import {
    baseCompile
} from '@vue/compiler-core';


let app = document.getE