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-c