我们在利用脚手架创建项目时,在一个环节中会让我们选择runtime-compiler或runtime-only,这两者到底有什么区别呢?

1.下面我们来创建两个项目,分别选中runtime-compiler和runtime-only:

项目一:

【vue】 runtime-compiler和runtime-only的区别
项目二:
【vue】 runtime-compiler和runtime-only的区别
2.我们先来查看这两个项目main.js文件的差别:
【vue】 runtime-compiler和runtime-only的区别
首先我们先看看vue实例是如何使用App这个模块的:

  • runtime-compiler:使用components属性注册App组件,在template属性是使用App组件。
  • runtime-only:直接使用render属性调用h()函数使用App组件。

runtime-only没有使用template属性,且当项目的vue实例中出现template,则运行会出错。

3.我们看看Vue实例中template属性运行过程:
【vue】 runtime-compiler和runtime-only的区别
上面很明显能看出runtime-compiler和runtime-only的执行区别:

  • runtime-compiler需从第一步运行到最后一步。
  • runtime-only则直接从第三步的render()开始执行。

1.性能上:明显runtime-only少了解析以及编译步骤,runtime-only性能更高。
2.项目代码量:由于runtime-only不用解析以及编译,则生成项目时就少了处理template的源码,则runtime-only的项目代码量更少。

相关文章: