runtime-compiler和runtime-only的区别

Posted 2023-03-20

参考技术A 如上图所示：

3、两者之间主要的区别体现 main.js 中，如以下两张图片：

在 runtime-only 模板中的的函数
render: h => h(App)
其实质为：

ES6简写：

再进一步缩写为：

通过箭头函数就有了：

runtime-only和runtime-compiler的区别

参考技术A 使用脚手架新建项目vue init webpack my-project会出现选择vue编译方式runtime-only 和runtime-compiler

我们建议选择runtime-only编译方式，因为runtime-only压缩体积小运行速度快，

这是因为vue对template的解析方式所决定的，template  ->  ast  ->  render  -> 虚拟dom  ->真实dom，

需要经过5步才可以把内容展示给用户，使用runtime-only则会省略前面2步，直接render  -> 虚拟dom  ->真实dom

在runtimeonly中，render会调用一个函数创建元素 ，

创建元素我们也可以引入对象，将vue文件引入，vue文件中也有template，但是为什么没有按照vue规则呢，这是因为我们使用了vue-template-compiler将template解析了，所以其实导入的时候已经没有template标签了

runtime-only ：，

runtime-compiler