Refer to the Vue documentation link: cn.vuejs.org/v2/guide/in…

Run-time Compiler differs from run-time only in main.js

// (1) Run-time Compiler
new Vue({
  el: '#app'.components: { App },
  template: '<App/>'
})
 
// (2) Runtime-only
new Vue({
  el: '#app'.render: h= > h(App)
})
Copy the code

The biggest differences you can see in the above code block are:

The arguments in run-time Compiler are Components and template. The runtime-only version is the render function.

Runtime-only the version cannot have template

In this vUE incomplete version, the VUE files need to be compiled into JS with the vue-loader of Webpack.

When WebPack uses vue-loader to compile the vuew file into JS, it compiles the component’s template template into the bit render function, so we get the render function shown above.

As a result, this version will only contain the runtime VUE code, leaving it to WebPack for template compilation.

This makes this version of the code smaller.

The run-time complier version can have templates

If you write a template, it will compile directly into the render function at run time instead of relying on WebPack to help with the compilation, which not only makes the version bigger, but also has a performance cost during compilation.

Run-time complier parsing:

  • Step 1: Convert the Template template into an Abstract syntax tree (AST);
  • Step 2: Use the Render function to convert the abstract syntax tree into a virtual DOM (vDOM).
  • Step 3: Convert the virtual DOM to the real DOM;

Template => Abstract syntax tree (AST) => Render () => Virtual DOM(vDOM) => page

Runtime-only parsing process:

  • Step 1: Vue-template-Compiler plug-ins convert components directly into render functions;
  • Step 2: Convert the virtual DOM returned by the Render function into a page;

Render () => virtual DOM(vdom) => page;

conclusion

Vue Full version (Run-time Compiler) Vue Incomplete (Runtime-only) evaluation
The characteristics of A compiler There is no compiler Compiler makes up 40% of the volume
view Write it in HTML or in the Template option Write the h in the render function to create the tag
Introduced the CDN vue.js vue.runtime.js Different file names
Webpack introduced Additional aliases need to be configured This version is used by default
Introduced the @ vue/cli Additional configuration required This version is used by default

Therefore, it is recommended to use the Run-time only version of VUE.

Advantages:

  • To ensure user experience, JS files downloaded by users are smaller in size, but h function (h in the render function) is supported.
  • To ensure the development experience, developers can write HTML tags directly in vue files instead of h functions
  • Vue -loader converts HTML from vue files into H functions.