Two versions of Vue

There are two versions of Vue, the full version and the partial version,

1.1 the full version

The full version includes both the compiler and runtime.

The function of the compiler is to compile the template string into code for the JavaScript render function

The runtime features include creating Vue instances, rendering, and handling the virtual DOM, which includes everything except the compiler

Only the runtime version is included in 1.2

Including only the runtime version means only the runtime, no compiler

Two, the difference between the two versions

Vue full version Vue contains only the runtime version
The characteristics of A compiler There is no compiler
view In HTML, or in the Template option Inside the render function, create the tag with h
Introduced the CDN vue.js vue.runtime.js
Webpack introduced Need to configure Aliases Use the default
Introduced the vue @ cli Additional configuration required Use the default

Which version should you use?

The best practice is to use the partial version and then import the Compiler using the Vue-Loader

The whole process is as follows:

  1. For users, the incomplete version (the Runtime version) is small and has a good user experience, but only supports the H function

  2. For programmers, writing only H functions is not a good development experience. If there is a Compiler, developers can write HTML tags and templates that are more intuitive and semantic, so we need a compiler

  3. The Vue-Loader can then introduce compiler, which precompiles HTML tags and templates in vue files to h functions at build time, making both users and developers happy

3, template and render

// Requires a compiler
new Vue({
  template: '<div>{{ hi }}</div>'
})

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

The template tag and the template in JS

// The template tag in the 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 the view 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

Three, quick online start Vue artifact

We can write Vue code online in Codesandbox without any local installation dependencies

Codesandbox. IO/s/boring – sa…

This article is the original article of FJL, the copyright belongs to myself and hungry people valley all, reprint must indicate the source