Vue面试题21：说一说Vue从template到render的处理过程 （总结自B站up主‘前端杨村长’视频，仅供自用学习）

问我们template到render过程，其实是问Vue编译器工作原理；

思路

• 1.引入vue编译器概念；
• 2.说明编译器的必要性；
• 3.阐述编译器的工作流程；

回答范例

• 1.Vue中有个独特的编译器模块，称为"compiler"，它的主要作用是将用户编写的template编译为js中可执行的render函数；
• 2.之所以需要这个编译过程是为了便于前端程序员能高效的编写视图模板；相比而言，我们还是更愿意用HTML来编写视图，直观且高效。手写render函数不仅效率底下，而且失去了编译期的优化能力，因此compiler的过程是必须的；
• 3.在Vue中编译器会先对template进行解析，这一步称为parse，结束之后会得到一个JS对象，我们成为抽象语法树AST，然后是对AST进行深加工的转换过程，这一步称为transform，最后将前面得到的AST生成（generate）JS代码，也就是render函数；

可能的追问：

• Vue中编译器的执行时刻？

  • 根据引入Vue的运行时不同，编译器的执行时刻是不同的：如果使用webpack环境，即Vue的预打包环境，这时webpack的vue-loader会提前将模板进行编译，这时编译器的执行时刻就是在打包阶段，即预编译；如果是非运行时版本，即携带编译器的版本，这时编译器就会在运行时工作：发现一个组件有模板没有渲染函数，就会去编译模板，将其转换为渲染函数，也就是发生在组件的创建阶段。

• React中有没有编译器？

  • react中又jsx，这不是编译器，可以理解为一种语法糖，语言本身没有变化，通过babel-loader将js变为js，因此react是没有编译器的。