Vue

• Vue 作者 -- 尤雨溪

• 主要作品 -- Vue 、 Vue Router 、 Vuex 、@Vue/Cli

Vue版本

1. 完整版 vue.js -- vue.min.js(production)

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

2. 运行时版本 vue.runtime.js -- vue.min.runtime.js(production)

• 非完整版：只包含运行时的版本

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

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

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

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

因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。

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

• 具体使用时

整个流程思路如下：

• 对于用户来说，非完整版 （即runtime版）体积小，用户体验好，但只支持h函数

• 对于程序员来说，只能写h函数的话，开发体验不好，如果有compiler, 开发者就能写更直观更语义化的HTML标签和template, 所以我们需要一个compiler

• vue-loader就可以引入compiler, 把vue文件里的HTML标签和template 会在构建时预编译成 h函数

3. template 和 render 用法

1. template

// 不需要编译器
new Vue({
  el: '#idxxx', 
  template: '<div>{{ hi }}</div>',
  data: {
      hi: 'Hello World!!'
  }
})

2. render

// 不需要编译器

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

4. 如何用 codesandbox.io 写 Vue 代码

• 第一步：魔法 --> 登录 codesandbox.io

• 第二步： click this

• 第三步： start Vue