1.两个版本的区别

Vue有两个不同的版本。

分别是Vue完整版（vue.js）（运行时版本）,一般使用script标签配合CDN进行引入。

和Vue非完整版（vue.runtime.js）,vue-cli默认使用。

完整版：同时包含编译器和运行时的代码，单独使用即可。
编译器（compiler）：将模板字符串编译成为JavaScript渲染函数的代码。
非完整版（运行时） ：创建Vue实例、渲染并处理虚拟DOM等的代码。基本包含除去编译器之外的功能。

最佳实践：以非完整版(运行时)为核心，然后配合vue-loader和vue文件实现单文件组件进行渲染。

目的：用户下载的 JS 文件体积更小，但只支持 h 函数。而且可以保证开发体验，开发者可直接在 vue 文件里写 HTML 标签，而不写 h 函数，多余的工作让 loader 完成。

2.两个版本的用法

当需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就需要使用带有编译器的完整版。

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

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

当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

template 和 render的区别

//完整版 - 需要 compiler 编译器 - 编译 template
new Vue({    //vue实例，类似jQuery封装的 return api
  el:'#app', //el代表渲染挂在节点，会被替换，同$mount('#app')    //涉及到 SEO 友好、服务端渲染
  data:{ num:0 }                      //完整版支持从html中获取视图
  template: '<div>{{ num }}</div>'    //template内容,可以直接写在HTML文件中
})
 
//运行时版 - 不需要 compiler 编译器 - 只能使用 h 函数
new Vue({    //vue实例
  render (h) {    //不支持template选项或从html中获取视图
    return h('div', this.num)    
  }
})

完整版通过内部配置的compiler解析器将模板中的内容解析成Dom节点渲染到页面

两个版本的区别

1. Vue.js(完整版)

优点：逻辑清晰简单，使用方便
缺点：

开发需要额外配置版本引用
视图模板写在HTML/template里，代码量大时管理困难。
代码体积较非完整版大30%，用户体验较差。

代码举例：

<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    template: `<div>{{ num }} <button @click="add">+1</button></div>`,
    data: {
      number: 0
    },
    methods: {
      add() {
        this.num ++;
      }
    }
  });
</script>

2. Vue.runtime.js非完整版

缺点：对初级开发者可能不友好
优点：

render函数相比于HTML/template模板内更为间接有效，甚至还能在函数体里面进行一些额外的代码逻辑。
不需要解析器，可以通过Webpack等工具自定义配置
代码体积较小，提升用户体验。