当我们用vue-cli2创建项目时,往往会碰到让我们选择runtime-compiler模式还是runtime-only模式
默认选择的是runtime-compiler,因为runtime-compiler“更保险一点”。但是其实runtime-only优点更多一点。
runtime-only相比runtime-compiler有两个优点:
1.运行效率高
2.源代码量更少
其实runtime-compiler模式,runtime-only模式在src文件里面只在main.js里面有区别,如图所示
可以看出runtime-compiler模式里的Vue实例的模板,和注册的组件,都被一个render函数替换掉了,这里就要细说一下template在vue内部是怎么样渲染成页面的了
由上图可知,template会被解析为ast,再被编译成为一个render函数,这个render函数会构造一个virtual dom(虚拟dom),最后virtual dom会转换为真是的dom,进行页面展示。
而在第二个图的render函数,换成ES5其实也是下面这种写法:
render: function(h) { return h(App) }
h(超文本标记语言)其实是一个Vue的一个内置函数createElement的缩写,他就是创建虚拟DOM的。return返回一个createElement方法,其中要传3个参数,第一个参数就是创建的div标签;第二个参数传了一个对象,对象里面可以是我们组件上面的props,或者是事件之类的东西;第三个参数就是div标签里面的内容。
这里其实就是创建出APP这样一个组件,用来替换index.html中id’为app的div,其实就是跟上面的template,注册组件最后的效果是一样的!
接下来,我们回到runtime-compiler和runtime-only的区别上来
runtime-compiler的步骤:
- template-> ast-> render-> virtual dom-> 真是dom
runtime-only的步骤:
- render-> virtual dom-> 真实dom
由此可见runtime-only相比于runtime-compiler
- 运行效率更高,性能更好
- 源代码量更少不需要(不需要template->ast这个过程的代码,如下图)
还有一点,runtime-only版本的main.js中的template会被render函数代替掉,那为啥组件中的template还在,他怎么被编译的呢?
这是因为组件中会调用vue的一个包:vue-template-compiler,跑项目的时候,这个包会自动将组件的template转化为render函数。
render函数:通过createElement这个函数可以直接传递一个组件