I was a little confused when I saw the two options for vue build when creating the vue project. What is the difference between run-time Compiler and run-time only? Today I checked some information and recorded my understanding.

General operation first look at the appearance of the two differences

Runtime-only can be used to reduce the size of 6K compared with the Runtime-compiler, but codeWhy recommends using Runtime-only to improve the performance. There are some differences. After creating vue scaffolding, let’s see what the difference is:

I noticed some differences in main.js

(Runtime Compiler was chosen)

(Run-time only was selected)

After looking at the difference in appearance, I want to think about why there is such a difference?

To understand why, it seems you need to understand how the Vue application works!

If template is passed to vue, vue will make a save, save it to the options below vue instance. After saving, vue will make a parse, parse into ast, and compile the syntax tree into render function. We then create a virtual DOM (virtual DOM tree) using the Render function, and finally generate the real DOM on the UI.

> Runtime-Compile

The steps for run-time Compile are as shown in the diagram:template -> ast ->render -> vdom -> UI

> the Runtime – only no

We can see that runtime-only uses the render function instead of the template and ast steps to render our App into a virtual DOM!

Render -> vdom -> UI

I believe you can get a sense of why run-time only is 6KB less than run-time Compiler, and why run-time only provides better performance.