我们在利用脚手架创建项目时,在一个环节中会让我们选择runtime-compiler或runtime-only,这两者到底有什么区别呢?
1.下面我们来创建两个项目,分别选中runtime-compiler和runtime-only:
项目一:
项目二:
2.我们先来查看这两个项目main.js文件的差别:
首先我们先看看vue实例是如何使用App这个模块的:
- runtime-compiler:使用components属性注册App组件,在template属性是使用App组件。
- runtime-only:直接使用render属性调用h()函数使用App组件。
runtime-only没有使用template属性,且当项目的vue实例中出现template,则运行会出错。
3.我们看看Vue实例中template属性运行过程:
上面很明显能看出runtime-compiler和runtime-only的执行区别:
- runtime-compiler需从第一步运行到最后一步。
- runtime-only则直接从第三步的render()开始执行。
1.性能上:明显runtime-only少了解析以及编译步骤,runtime-only性能更高。
2.项目代码量:由于runtime-only不用解析以及编译,则生成项目时就少了处理template的源码,则runtime-only的项目代码量更少。