## 一、背景项目需求中需要根据不同场景展示不同文案和 UI。其中 UI 总类繁多，并且文案内容均需后端组装拼接，UI 模板中还需要支持链接跳转。同时需求还有二期，可能会继续增加很多种新的场景和 UI，因此考虑到扩展性，思索是否可以通过动态渲染 UI 模板的方式来做，由后端下发具体的模版内容，前端仅仅负责展示。 ## 二、目标 * 可动态渲染 UI 模板，具备快速支持新的 UI场景，**无需重复开发**。 ## 三、方案调研支持动态渲染模板主要有三种方案： ### 3.1、方案一：v-html > v-html：想到动态渲染模板，首先就会想到通过 v-html 方式，直接嵌入原生 html 内容。 [demo](https://codesandbox.io/p/sandbox/vue-compile-comp-7lfj36) ```js ``` **优点：** 1. 简单，原生支持，能支持动态 html 标签和样式。 2. 实现成本低，快捷。 **缺点：** 1. 只能使用原生 html 标签，无法使用项目中组件库。 2. 绑定事件只能通过顶层标签代理来实现，较为繁琐。 3. 存在 XSS 安全问题。 ### 3.2、方案二：vue.compile > 通过 compile 函数，动态编译模板，并返回一个渲染函数，能够在运行时生成动态组件。 [demo](https://codesandbox.io/p/sandbox/vue-compile-comp-7lfj36) ```js ``` App.vue ```js ``` vite.config.ts ```js // vite.config.ts import { defineConfig } from 'vite' export default defineConfig({ ... resolve: { alias: { // 仅完整版 vue 才支持实时动态编译，默认的 runtime 版本不包含此功能，需要显式引用 vue: "vue/dist/vue.esm-bundler.js", }, }, }) ``` **优点：** 1. 可以引用项目中全局导入的组件库。 2. 绑定组件中数据和事件比较方便。 **缺点：** 1. vue runtime 版本不支持动态 compile，需导入带编译的完整版才可以，这样会导致 vue 包体积变大，影响性能。 2. 存在 XSS 安全问题。 ### 3.3、方案三：渲染函数 h & jsx > 渲染函数 & jsx 可以处理复杂的业务逻辑，用于实现动态组件。 [demo](https://codesandbox.io/p/sandbox/vue-compile-comp-7lfj36) ```js ``` vite.config.js ```js // vite.config.js import vueJsx from '@vitejs/plugin-vue-jsx' export default { plugins: [ // 若要支持 jsx 需要引入 @vitejs/plugin-vue-jsx 插件编译构建 vueJsx({ // options are passed on to @vue/babel-plugin-jsx }), ], } ``` **优点：** 1. 非常的灵活，可以处理复杂业务逻辑，动态渲染组件。 **缺点：** 1. 必须要实现每种 UI 场景，后续若有新增场景仍需要开发，无法达到减少前端开发成本的目标。 ### 3.4、方案确认当前需求中，仅仅只需展示一些文本 & 超链接，没有其他复杂的 UI 功能，以及没有任何点点击或悬浮事件，因此最终决定选择方案一。通过配置平台存放不同场景的UI模版，后端读取模板配置&填充模版数据，再将完整模版&数据下发给前端，最后页面通过 v-html 展示模板 UI。至此这个需求其实就结束了，由于上面的方案中使用到了 [vue.compile](http://vue.compile)，因此就好奇 vue 是如何去编译模板，以及 vue SFC 文件的编译与实时编译的模板字符串过程有何不同，下面就为大家浅析 vue 模板编译的过程。 ## 四、模板编译 ### 4.1、vue 不同构建版本前面方案中提到若要支持在运行时编译模板，必须要手动引入带编译版本的 vue 才行，打包构建时默认引用的是 `runtime` 版本，不包含编译功能。下面梳理了 `vue` 的所有构建版本，以及各个版本使用场景。 ```js // cjs 服务端渲染，两个版本都是完整版，包含编译器。通过 `require()` 在 Node.js 服务器端渲染使用。 vue.cjs.js vue.cjs.prod.js // bundler 两个版本没有打包所有的代码，只会打包使用的代码，需要配合打包工具来使用，会让 Vue 体积更小。 vue.esm-bundler.js 【完整版，包含编译器，体积大点】 vue.runtime.esm-bundler.js【默认】 // global 四个版本都可以在浏览器中直接通过 ` ``` #### parse 这一步做的是解析，并没有对代码进行编译，把一个 Vue 文件，拆分成不同的块，然后分别对每个部分进行编译，其中最最终的 3 个部分如下： * template 块 * script 和 scriptSetup 块 * 多个 style 块 ```js // 用来表示 .vue 文件中每个代码块的对象 export interface SFCDescriptor { // 模板 template: SFCTemplateBlock | null; // 脚本 script: SFCScriptBlock | null // 使用