Vue full version and Runtime version

Comparative study vue.js vue.runtime.js The difference between
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
Introduced the @ vue/cli Additional configuration required This version is used by default

conclusion

  • The full version can be written directly to HTML to see the view, or rendered to HTML using template.
  • The runtime version can’t render the page directly. You need to use the H function in Render to create HTML nodes.
  • One of the biggest benefits of the runtime version is its small size.
  • 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.

How to use template and render

A complete version of the template

// html
<div id="app"></div>

// main.js
new Vue({
  el: "#app", // 模版字符串插入的位置
  template: `
    <div>{{ value }}</div>
  `,  // 模版字符串
  data: {
    value: 0
  }, // 替换的数据，即{{ value }} 被替换为0
})

// 最终的html页面
<div id="app">0</div>
Copy the code

Run time version render

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

Codesandbox.io writes Vue code

Create vUE in codesandbox.io/s/ to use directly

  • Create sandbox: in the upper right corner create sandbox creates a vue sandbox.
  • Export file: upper-left corner file-> Export to ZIP
  • Importing External static resources: External Resources in the lower left corner