一、Vue的两个版本

Vue有两个版本，分别是完整版和非完整版，

1.1 完整版

完整版同时包括编译器(compiler) 和运行时(runtime)

编译器的功能是将模板字符串编译为 JavaScript 渲染函数(render函数)的代码

运行时的功能包括创建 Vue 实例、渲染并处理虚拟 DOM 等，它包括除了编译器的其他所有功能

1.2 只包含运行时版

只包含运行时版就只有运行时，没有编译器

二、两个版本的区别

	Vue完整版	Vue只包含运行时版
特点	有compiler	没有compiler
视图	写在HTML里，或者写在template选项里	写在render函数里，用h创建标签
cdn引入	vue.js	vue.runtime.js
webpack引入	需要配置alias	默认使用
vue@cli引入	需要额外配置	默认使用

那究竟应该使用哪一个版本呢？

最佳实践是使用非完整版，然后用vue-loader引入compiler

整个流程思路如下：

对于用户来说，非完整版（即runtime版）体积小，用户体验好，但只支持h函数
对于程序员来说，只能写h函数的话，开发体验不好，如果有compiler, 开发者就能写更直观更语义化的HTML标签和template, 所以我们需要一个compiler
vue-loader就可以引入compiler, 把vue文件里的HTML标签和template 会在构建时预编译成 h函数，这样用户和开发者都高兴

三、template 和 render 的用法

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

template标签和JS里的template

//vue文件中的template标签
  <template>
      <div id="app">      
          {{n}}
          <button @click="add">+1</button>   
     </div> 
  </template>

//js中的template
    template : `
        <div id="app">      
          {{n}}
          <button @click="add">+1</button>   
        </div> 
    `

render函数：

//不完整版在js中构建视图
  render(h){ 
       return h('div', [this.n,h（'{on:{click:this.add}’,'+1'])
   }

//不完整版使用vue-loader

//先创建一个demo.vue文件，在里面构建视图
    import demo from "./demo.vue"
     new Vue({
       el: "#app",
       render(h) {
         return h(demo)
       }
     })

三、快速在线上手Vue的神器

我们可以在codesandbox里在线写Vue的代码，不用任何本地的安装依赖

codesandbox.io/s/boring-sa…

本文为fjl的原创文章，著作权归本人和饥人谷所有，转载务必注明来源

《深入分析Vue两个版本》