Vue完整版与非完整版

本文主要介绍Vue完整版与非完整版的区别与优缺点：

最佳实践：总是使用非完整版，然后配合vue-loader和vue文件
具体思路：
保证用户体验，用户下载的 JS 文件体积更小，但只支持 h 函数
保证开发体验，开发者可直接在 vue 文件里写 HTML 标签，而不写 h 函数
中间的转换过程让loader 来做，vue-loader把 vue 文件里的 HTML 转为 h 函数

引入

• 完整版：vue.js
链接：https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js
• 非完整版（只包含运行时版）: vue.runtime.js
链接：https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.runtime.js

用法

• 使用完整版，引入 vue.js 时，视图写在 HTML 里或 template 中

new window.Vue({
  el: "#app",
  template: `
    <div @click="add">{{n}} <button>+1</button></div>
  `,
  data: {
    n: 0
  },
  methods:{
    add(){
      this.n += 1
    }
  }
})

• 使用非完整版，引入 vue.runtime.js 时，视图写在 render 中

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

使用codesandbox.io写Vue代码

1. 点击 进入官网
2. 点击 "Create a Sandbox, it's free"
3. 选择 "Vue"

   可以把创建开发好的项目代码下载到本地：选择file => Export to ZIP