Vue完整版与runtime版本的区别

完整版

• 是同时包含编译器和运行时的版本，CDN引入所对应的文件名为vue.js或vue.min.js（生产环境）。

  
  完整版
  

  该版本有编译器，占用代码体积，所以比runtime版大40%的体积。
  使用该版本，可直接将内容写在HTML中查看视图效果，或用template 渲染到 HTML，用webpack引入，需要配置alias，@vue/cli 引入也需要额外配置。

new Vue({
  template: '<div>{{ hi }}</div>'
})

runtime版本

• 是只包含运行时的版本，没有编译器，CDN引入所对应的文件名为vue.runtime.js或vue.runtime.min.js。

  
  runtime版
  

  因该版本无编译器，故占用代码体积小，但无法直接实现页面渲染，需要利用 render 里的 h 函数来创建 HTML 节点，vue.js的webpack引入和@vue/cli 引入都默认使用此版本。

new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

在实际开发中，由于h函数的参数比较复杂，可以使用vue-loader把vue文件里的HTML转为h函数。
如将vue.js错引用为vue.runtime.js，则无法将HTML编译为视图；如将vue.runtime.js错引用为vue.js，代码体积会变大，具体大家可以使用Codesandbox.io实践一下。

如何用 codesandbox.io 写 Vue 代码

codesandbox.io是一个在线编辑器，能够快速创建项目。

codesandbox.io主页
注意：不要登录，否则只能创建50个项目

点击中间按钮，创建项目。

image.png

选中vue开始编辑即可。

vue