不同构建版本

UMD	CommonJS	ES Module (基于构建工具使用)	ES Module (直接用于浏览器)
完整版	vue.js	vue.common.js	vue.esm.js	vue.esm.browser.js
只包含运行时版	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js	-
完整版 (生产环境)	vue.min.js	-	-	vue.esm.browser.min.js
只包含运行时版 (生产环境)	vue.runtime.min.js	-	-	-

注：

完整版：同时包含编译器和运行时的版本。
编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

完整版 vue.js

index.html引入

main.js

本地预览

只包含运行时版 vue.runtime.js

index.html引入

main.js

本地预览

window.Vue还是可以打印出来，但0却不在了，因为runtime版本不支持从HTML里获取视图。

就算写在template中也不支持

但使用template在完整版里是支持的

根据官方文档可得知，如果在客户端编译模板（比如传入一个字符串给template选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版：

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

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

把index.html中div里的{{n}}删掉，在main.js写render

实现+1功能

new Vue({
  el: '#app',
  render(createElement){
    const h = createElement
    return h('div',[this.n,h('button',{on:{click:this.add}},'+1')])
  },
  data:{
    n:0
  },
  methods:{
    add(){
      this.n += 1
    }
  }
})

68.4.1.gif

Vue实例

Vue实例官方文档

使用Vue实例的三种方法：

方法一：

完整版Vue，从CDN引用vue.js或vue.min.js即可做到，也可以通过import引用vue.js或vue.min.js

方法二：

运行时版本vue.runtime.js

方法三：

写（完整版），用户下载（运行时版本）

可以通过webpack，使用vue-loader将*.vue文件翻译成h构建方法，但这样做HTML就只有一个div#app，SEO不友好

总的来说，运行时版本使用vue-loader或vueify，*.vue文件内部的模板会在构建时预编译成JavaScript。在最终打包好的包里是不需要编译器的，所以只用运行时版本即可。相较而言，运行时版本的体积比完整版要小大约30%。

写一个vue

使用

在main.js中import Demo，指定渲染到#app，即index.html

打印出Demo如下：

可以知道Demo是个对象，而且有render，相当于上面使用vue.runtime.js时，使用的那个render，这里自动用vue.loader将Demo.vue里的template翻译为script中所需要的render。

打印出Demo.render.toString()，证实了这个说法。

这个Demo就是vue单文件组件

SEO友好

上面说到，方法三对SEO不友好，那么SEO是什么呢？

SEO就是搜索引擎优化

可以认为搜索引擎根据curl结果猜测页面内容，如果页面都是用JS创建div，那么就很难检测出信息。

把title、description、keyword、h1、a写好即可，原则是能够让curl得到页面的信息，SEO就能正常工作。

Google可以获取JS创建的内容。

深入理解两种区别

	Vue完整版	Vue非完整版	评价
特点	有compiler	无compiler	compiler占40%体积
视图	写在HTML里或者写在template选项	写在render函数里用h来创建标签	h是作者写好传给render的
cdn引入	`vue.js`	`vue.runtime.js`	文件名不同，生成环境后缀为`.min.js`
webpack引入	需要配置 alias	默认使用此版	作者配置
@vue/cli引入	需要额外配置	默认使用此版	作者配置

最佳实践：使用非完整版，然后配合vue-loader和vue文件

思路：

保证用户体验，用户下载的JS文件体积更小，但只支持h函数
保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数
使用vue-loader把vue文件里的HTML转为h函数

Vue：浅析vue.js完整版 和 vue.runtime.js运行时版