Vue full version and Runtime version

The full version

  1. The corresponding file name is vue.js or vue.min.js.
  2. Full version = runtime version + compiler (compiler: code that compiles template strings into JS renderers)
  3. This version has a compiler and takes up 40% more volume than the Runtime version.
  4. With this version, you can write content directly to HTML to see the view, or render it to HTML using template.
  5. Webpack import requires alias configuration, @vue/ CLI import also requires additional configuration.
// HTML <div id="app"></div> // main.js new Vue({el: "#app", // template string insert position: ` < div > {{value}} < / div > `, / / template string data: {value: 0}, / / replace data, namely, {{value}} is replaced with 0})Copy the code

The HTML obtained at the end

<div id="app">0</div>
Copy the code

Running version

  1. Vue runtime.js or vue runtime.min.js for CDN import.
  2. Because this version has no compiler, it occupies a small volume of code, but can not directly achieve page rendering, need to use the H function in render to create HTML nodes. H is the function provided by vue.runtime.js that takes arguments from the template string and returns the rendered raw HTML.
  3. This version is used by default for both the webpack import of vue.js and the @vue/ CLI import.
new Vue({
  el: "#app",
  data: {
    value: 0
  },
  render(h) {
    return h('div', this.n)
  },
})
Copy the code

In the actual development, due to the complex parameters of h function, vUE single file components (files ending with. Vue) can be converted into parameters required by H function by using vue-Loader plug-in of Webpack.

  • If vue.js is misreferenced as vue.runtime.js, the HTML cannot be compiled into a view.
  • If vue.runtime.js is misreferenced as vue.js, the code size will increase
Comparative study vue.js vue.runtime.js evaluation
The characteristics of There are compilers No compiler Compilers account for 40% of the volume
view Write it in HTML or template Write it in the render function and create the tag with h H is a built-in vUE callback function
Introduced the CDN vue.js vue.runtime.js Suffix for file name is different, the production environment. Min. Js (vue. Min. Js/vue. Runtime. Min. Js)
Webpack introduced Need to configure alias This version is used by default Vue configured by the author
Introduced the @ vue/cli Additional configuration required This version is used by default Vue configured by the author

conclusion

  1. The full version can be written directly to HTML to see the view, or rendered to HTML using template.
  2. The runtime version cannot directly implement page rendering, so it needs to use the H function in Render to create HTML nodes. The webpack introduction of vue.js and the @vue/ CLI introduction use this version by default.
  3. One of the biggest benefits of the runtime version is its small size.
  4. Single-file component: Due to the complex parameters of h function, you can use vue-loader to convert HTML in Vue file into H function.

The template and render

Reference: www.cnblogs.com/wuqilang/p/…

  • Template —- HTML to do the rendering

  • Render —-js way to do render

  • Render is a compilation method: there is a function h in Render that creates the virtual DOM of a single file component, which is then parsed by Render.

  • H is createElement() method: createElement(tag name, attribute configuration,children)

  • Template is also a compilation method, but template will eventually be compiled again with render.

The difference between

  1. Render allows us to use JS to its fullest extent, since it actually creates the virtual DOM with createElement(). Logical, suitable for complex component encapsulation.
  2. Template is an HTML-like template that encapsulates components.
  3. Render performs much better than Template.
  4. The render function takes precedence over template.

template

  1. Type: string
  2. Detail: A string template is used as the identity of the Vue instance. The template will replace the mounted elements. The 43. Content of the mount element will be ignored unless the template content has distribution slots.

Others: Only available in the full version of VUE, in conjunction with the EL attribute.

Use template to display a 0 on the page

index.html

The < body > < div id = "app" > < / div > < script SRC = "https://cdn.bootcss.com/vue/2.6.10/vue.min.js" > < / script > < / body >Copy the code

main.js

New Vue ({/ / element element el: '# app, the template: ` < div > {{n}} < / div > `, data: {n: 0}})Copy the code

render

  1. Type: the function
  2. Details: Receives a callback function h (h is the built-in callback function in VUE), and h takes two arguments. The first argument is the name of the dom object being rendered (a string), and the second argument is the contents of the DOM. Render (h){h(‘div’,’hello vue’)} render(h){h(‘div’,’hello vue’)}

Render a 0 on the page

index.html

<body>
  <div id="app"></div>
</body>
Copy the code

main.js

New Vue({// element el: '#app', render(h){return h('div', this.n)}, data: {n: 0}})Copy the code