1. Two versions of Vue

Vue comes in two versions, complete and incomplete

1.1 the full version

The full version includes both the compiler and runtime. The compiler’s function is to compile the template string into the JavaScript render function. The runtime functions include creating Vue instances, rendering and processing the virtual DOM, etc. It includes everything except the compiler

1.2 includes only the runtime version

Run-time only version means run-time only, no compiler

2. Differences between the two versions

Vue full version Vue partial version 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 H is written by Yuxi and sent to Render
Introduced the CDN vue.js vue.runtime.js The generated environment suffix is.min.js
webpack Alias needs to be configured. This version is used by default Specially equipped by Rain Creek
Introduced the @ vue/cli Additional configuration required This version is used by default You yuxi, Jiang Haoqun configuration
  • So which version should I use?
  • The best practice is to use the incomplete version and then introduce compiler with vue-loader.
  1. For users, the non-complete version (i.e. the Runtime version) is small and provides a good user experience, but only supports h functions
  2. For programmers, the development experience is not good if they can only write H functions. If compiler is available, developers can write MORE intuitive and semantic HTML tags and templates, so we need a Compiler
  3. Vue-loader can then introduce compiler, which precompiles HTML tags and templates in Vue files into H functions at build time, so that users and developers are happy

3. template and render

// A compiler is required
new Vue({
  template: '<div>{{ hi}}</div>'
})

// No compiler is required
new Vue({
  render (h) {
    return h('div'.this.hi)
  }
})
Copy the code

Template tag and template in JS

// Template tag in vue file
  <template>
      <div id="app">      
          {{n}}
          <button @click="add">+ 1</button>   
     </div> 
  </template>

/ / js in the template
    template : ` 
      

        {{n}} 
        
      
 `
Copy the code

Render function:

// The incomplete version builds views in JS
  render(h){ 
       return h('div'[thisN, h ('{on: {click: this. Add}', '+1Import demo from "./demo.vue" new vue ({el: "#app", render(h) { return h(demo) } })Copy the code

4. Write Vue code with codesandbox.io

Open the urlcodesandbox.ioSelect Vue