Runtime-Compiler和Runtime-only的区别

116 阅读1分钟

image.png 我在创建vue项目时,看到vue build的两个选项时有些困惑,Runtime-Compiler和Runtime-only有什么区别,之前都是直接选中默认第一个的。今天查了一些资料,记录一下自己的理解。

常规操作先看看两个的外观区别

Runtime-only非常明白的告诉大家,用它可以比Runtime-Compiler减少6k的体积,好吧,做为菜鸡的我暂时不知道6k大小有啥区别,但是codewhy老师非常推荐使用Runtime-only,可以提高性能,看来少了6k,还是有些区别的。 创建完vue脚手架后我们再看看有啥区别:

我在main.js里面发现了一些不同

image.png(选择了Runtime-Compiler)

image.png(选择了Runtime-only)

看完了外观区别,我要想想为什么存在这样的差异呢?

想理解为什么,看来需要先理解Vue应用程序是如何运行起来的!

image.png

我们可以看到template传给vue的时候,其实vue里面会做一个保存,保存到vue实例下面的options,保存完后会做一个parse(解析),解析成ast(抽象语法树),把编译语法树compiler(编译)成render函数,之后通过render函数创建一个virtual dom(虚拟dom树),最后生成UI上的真实dom。

> Runtime-Compile

Runtime-Compile的步骤就是图上的步骤:template -> ast ->render -> vdom -> UI image.png

> Runtime-only没有

我们可以看到Runtime-only没有template和ast的步骤,直接就使用了render函数,将App变成虚拟dom!

image.png

也就是说Runtime-only的步骤是:render -> vdom -> UI

相信大家看到这里已经大概可以感觉到为什么Runtime-only比Runtime-Compiler少了6kb,为什么Runtime-only的性能会更好的原因了。