Vue 两个版本的区别（完整版 v.s. 运行时版）

使用 Vue 实例的三种方式

方法一：从 HTML 得到视图
- 使用「完整版 Vue」
- 通过 cdn 或 import 来引入 vue.js 或者 vue.min.js
- 将视图写在 HTML 中或者写在 template 选项中
方法二：用 JS 来构建视图
- 使用「非完整版 Vue」
- 通过 cdn 或 import 来引入 vue.runtime.js 或者 vue.runtime.min.js
- 使用 render 函数
方法三：使用 vue-loader（webpack 的一个 loader）
- 使用「非完整版 Vue」
- vue-loader 可以把 *.vue 文件翻译成 h 构建方法
- 这种做法的缺点是，HTML 内就只有一个 div#app，对 SEO 不友好

对比如下：

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

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

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

最佳实践：总是使用非完整版，然后配合

vue-loader 和 vue 单文件组件。

Vue 作者的思路：

全称：Search Engine Optimization，中文：搜索引擎优化
你可以认为搜索引擎就是在不停的发起 curl
搜索引擎根据 curl 的结果来猜测页面的内容
如果页面的内容是通过 JS 渲染上去的，则不利于 SEO
- JS 创建 div
- 比如 Vue 的 HTML 内初始就只有一个 div#app，这个 div 的内容是通过 JS 后面填充进去的，因此 Vue 不利于 SEO（可以用 SSR 来解决 Vue 的 SEO 问题）

解决「SEO 不友好」方法：