Run-time Compiler differs from run-time Only

When we use the vue init command to create scaffolding, we have the following options

Runtime + Compiler

Runtime-only

So what’s the difference between them? Today we’ll talk about it

First, we create Vue scaffolding in both ways. What are the differences between main.js and main.js

The difference is obvious. In the Vue instance, the run-time compiler is created with components and template as the parameters, while in the Run-time only project, the render function is the parameter, which is the biggest difference

Component rendering process

Second, let’s look at how components are rendered into the page, which is crucial to understanding the above question

Template –> ast –> render –> vDom –> real Dom –> page

Ast: Abstract syntax tree
VDom: virtual Dom

As you can see, template will still end up being rendered as a render function, remember this conclusion

runtime-only

When we use runtime-only, we need to use the Loader tool of Webpack to compile the.vue file into JavaScript. Because it is done at the compile stage, it only contains the vue. js code at runtime, so the code volume is lighter.

Compiling the.vue file into a JavaScript file compiles the template template in the component into the render function, so we get the render function version. So it’s run without compilation, compilation is done offline

Template is converted to the render function via vue-template-compiler