This is the difference between the full version and the incomplete (runtime) version

  • The full version includes both the compiler and runtime.

The compiler’s function is to compile template strings into JavaScript render functions. The code runtime’s function includes the creation of Vue instances, rendering and processing of the virtual DOM, etc. It includes all other functions except the compiler’s

  • The runtime version is just a run-time, no compiler

The difference between untime-compiler and runtime-only in main.js files

// (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 difference in the above code is:

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

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:

  1. Convert the Template template to an Abstract syntax tree (AST);
  2. Render function transforms abstract syntax tree into virtual DOM (vDOM);
  3. Convert the virtual DOM to the real DOM;

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

Runtime-only parsing process:

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

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

conclusion

You are advised to use the Run-time only version of VUE.

Advantages:

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

Vue official website document