浅析 Vue 两个版本的区别

文件名不同（分别通过 bootcdn 引入如下）：

• 完整版：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

完整版体积更大

完整版比非完整版多一个 compiler （编译器，用来将模板字符串编译成为 JavaScript 渲染函数的代码），代码体积会比非完整版的大 40% 左右

用法

• 使用完整版，引入 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
    }
  }
})

注意：

以上两个版本，在生产环境下，应使用后缀为 .min.js 的文件

.min.js是压缩出去空格、回车的文件，主要用于开发用
.js是未经压缩的源码，自带的格式更方便用户查看源码

补充：除 bootcdn 以外的其它引入方法

• webpack 引入： 默认使用非完整版，使用完整版需要配置 alias
• @vue/cli 引入： 默认使用非完整版，使用完整版也需要额外配置

总结：

平时最好默认使用代码体积小的非完整版，编译的工作交给 vue-loader 去做

这样选择的优点如下：

1. 保证用户体验，用户下载的 JS 文件体积更小，但只支持 h 函数。
2. 保证开发体验，开发者可直接在 vue 文件里写 HTML 标签，而不写 h 函数。
3. 简化操作流程， vue-loader 会把 vue 文件里的 HTML 转为 h 函数,这样我们就不需要写太多麻烦的 h 函数就可做到和完整版一样的事

h 函数是 vue 中的 createElement 方法