浅谈Vue.js中的运行时编译

引言

在一个框架设计之初，通常有三种选择：纯运行时的、纯编译时的或运行时+编译时的。如Svelte框架就是纯编译时的，而Vue.js则被设计为运行时+编译时

运行时

运行时设计框架个人感觉使用风格类似于命令式编程。举个例子，假设运行时框架提供了一个Reader函数，内部代码实现如下：

用户如果需要调用Render函数来将相应的数据渲染为DOM元素，那么就需要自行提供数据对象，而且一般Reader函数对所接收的数据对象有相应的限制，如下：

则在运行时框架中，以上述Render函数为例，通常使用方法为：

总的来说，用户在使用运行时设计框架时的体验是接近命令式编程的，操作控制流程的每一步都用代码的形式体现了出来，没有涉及任何额外的步骤，用户为了使用也不需要学习额外的知识，但是心智负担还是比较大的

编译时

编译时与运行时的关系就好比声明式编程与命令式编程。在Vue.js的视图层框架设计中，声明式的使用方法在内部是调用了命令式的实现的，而编译时设计框架则是把原本在运行时设计框架中需显式调用执行的一些程序逻辑“封装”到了编辑期中执行，而为用户暴露类似“声明式”的使用方案

同样是创建一个div元素，其中包含一个文本值为"Hello world !"的span元素，在编译时设计框架中的创建方法如下：

在程序代码编译时期，编译器会将用户输入的模板字符串编译转换为命令式的代码，如下：

因此，编译时设计框架是在内部实现了大量代码，而以一定的规则提供给用户特定的使用方式，这样是不是感觉编译时相较运行时在用法上简单、直观许多？当然，这样的做法降低了使用灵活性

运行时编译

现在我们已经了解了运行时和编译时设计框架的基本原理，那么有没有一种方案能够实现按需使用运行时或编译时呢？当然有，那就是运行时编译，也是Vue.js框架设计时的选型

可以设计一个Compiler程序专门负责将HTML模板字符串编译成树型结构的数据对象，那么就可以将该编译程序封装成Compiler函数暴露给用户使用，则使用示例如下：

采用这样的模式，框架就被设计成为了一个运行时编译的框架，它即支持运行时（用户直接提供数据对象而无需编译），又支持编译时（用户提供HTML模板字符串）。当然，如果在程序代码运行时才进行编译会产生一定的性能开销，所以通常在项目构建的时候就执行compiler程序将用户提供的内容编译好，这样对性能更加友好

总结

Vue.js作为一个运行时+编译时的框架，在保持灵活性的基础上，还能够通过编译的手段分析用户提供的内容，从而进一步提升更新性能

声明

• 本文属于读书笔记一类，是作者在拜读 霍春阳 大佬的新作《Vue.js设计与实现》途中，以书中内容为蓝本，辅以个人微末的道行“填写”完成
• 欢迎大佬斧正
• 日更