Vue 的两个版本

vue.cli官方文档
Vue有两个不同的版本，分别是Vue完整版（vue.js）和Vue非完整版（vue.runtime.js）

MVC中V是Vue的重点，M和C 则被简化了

Vue完整版：内置了compiler（编译器，将模板字符串或一些循环语句编译成为 JavaScript 渲染函数的代码），渲染的是DOM节点，不需要重新编译

缺点：完整版体积更大

Vue非完整版：没有compiler，html和js的内容不能互相识别，体积更小，要比完整版体积小大概30%

解决：用vue-loader，在build提交代码时，vue-loader调用compiler实现编译
开发者不用写复杂的h函数，同时用户下载的代码块体积小很多，一举两得

完整版的视图是写在HTML里或template选项的，完整版运行时，用来创建 Vue 实例、渲染处理DOM 等代码

非完整版的视图写在render里，是用h函数来创建标签。非完整版运行时使用 vue-loader 调用compiler，build生成编译过后的代码

完整版template 用法

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

非完整版render用法

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

从 webpack 引入Vue，默认是非完整版，完整版需要配置 alias

从 @vue/cli 引入Vue，默认是非完整版，完整版需要额外配置

现在前端基本不会用完整版的，默认使用非完整版，代码体积小对用户更友好

保证用户体验，用户下载的JS文件体积更小，但只支持h函数
保证开发体验，开发者可直接在vue文件里写HTML标签，而不写 h函数
活让loader做，vue-loader 会把vue文件里的HTML转为h函数,这样我不用写太多麻烦的 h函数就可做到和完整版一样的事,还更节约文件大小,提升用户体验

image.png