In the installation section of the Vue documentation, build versions of Vue are roughly divided into the full version and the runtime version. The terms are described as follows:

Full version: Includes both compiler and runtime versions.

Compiler: The code used to compile a template string into a JavaScript rendering function.

Runtime: The code used to create the Vue sample, render, process the virtual DOM, and so on. Basically, you get rid of everything else in the compiler.

Let’s see what the difference is through an example.

Create a +1 button

Use the full version

In the full version, views can be obtained using template syntax:

<html>
  <body>
    <div id="app">
      {{ n }}
      <button @click="addOne">+ 1</button>
    </div>
    <! -- Introducing the full version of Vue -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app'.data: {
          n: 0
        },
        methods: {
         addOne() {
           this.n += 1}}})</script>
  </body>
</html>
Copy the code

At this time, click the +1 button in the page, the initial value of 0 will become 1, realizing the function of the +1 button.

Use the runtime version

Replace the Vue that introduced the full version with the runtime version:

<! -- Introduce the runtime version of Vue -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.runtime.js"></script>
Copy the code

After refreshing the page, the following error message will appear in the console:The runtime version of Vue does not support using template syntax to get views because it does not have a template compiler. The solution is to use eitherrenderFunction, or use the full Vue version. Next interview userenderFunction to resolve an error:

<html>
  <body>
    <div id="app"></div>
    <! -- Runtime version of Vue -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.runtime.js"></script>
    <script>
      new Vue({
        el: '#app'.data: {
          n: 0
        },
        methods: {
          addOne() {
            this.n += 1}},/ / render function
        render(h) {
          return h('div'[this.n, h('button', { on: { click: this.addOne }}, '+ 1')]}})</script>
  </body>
</html>
Copy the code

Running the above code also implements the +1 button function.

Full vs Runtime edition

Using the two Vue builds during the development of the +1 button, you can see that the template syntax is much more intuitive than the render function. Do you always use the full version at development time? The answer is no, mostly using the runtime version. For example, @vue/cli creates projects that use the run-time version by default because:

Because the runtime version is approximately 30% smaller than the full version, you should use it whenever possible.

The part of the full version that is larger than the run-time version is the compiler, which has to compile the template strings into JavaScript rendering functions, so the compiler is more complex and therefore larger. For example, after the project is built, assuming that the full version is 100kb in size, the runtime version will be about 70kb in size, which means that the full version is about 40% larger than the runtime version, so use the runtime version whenever possible.

The difference between the full version and the runtime version is whether the template needs to be compiled, and when the template needs to be compiled, the full version must be used:

  • Use the template option.

    new Vue({
  el: '#app'.template: '<div>{{ n }}</div>'
})
Copy the code

  • Mount to the element and use the HTML inside the DOM as a template.

    <div id="app">
  <h1>hellow Vue.js</h1>
</div>
<script>
  new Vue({
    el: '#app'
  })
</script>
Copy the code

Best practices

Always use the runtime version with a vue-loader and a single file component with a.vue file extension:

  • To ensure the user experience, the render function is needed to reduce the size of the JavaScript downloaded by the user.

  • To ensure the development experience, developers can use template syntax, so develop in a single file component.

  • At build time, templates inside *.vue files are precompiled into JavaScript rendering functions using the vue-loader.

For example, @vue/cli created a project that practiced this, and app.vue was developed using template syntax:

<template> <div id="app"> {{ n }} <button @click="addOne">+1</button> </div> </template> <script> export default { name:  'App', data () { return { n: 0 } }, methods: { addOne () { this.n += 1 } } } </script> <style lang="scss"> #app { color: red } </style>Copy the code

Then, inmain.jsaddconsole.log(App)When you build, you get the following objects in the console:

Put the object’srenderMethod is printed outApp.vueJavaScript rendering function for: