其实就是完整版与非完整版(运行时版)的区别
-
完整版同时包括编译器(compiler) 和 运行时(runtime) 编译器的功能是将模板字符串编译为 JavaScript 渲染函数(render函数)的代码 运行时的功能包括创建 Vue 实例、渲染并处理虚拟 DOM 等，它包括除了编译器的其他所有功能
-
运行时版就只有运行时，没有编译器
untime-Compiler 和 runtime-only在main.js文件的区别
//（1） Runtime-Compiler
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
// （2）Runtime-only
new Vue({
el: '#app',
render: h => h(App)
})
上面的代码最大的区别在于:
runtime-Compiler 中的参数是 components和template. 而runtime-only版本中的参数是render
runtime-only 版本 不能有 template
在这个vue不完整版，需要借助webpack的 **vue-loader **加载器 把vue文件编译成js。
webpack使用vue-loader将vuew文件编译js的过程中会将组件的template模板编译位render函数，所以我们得到的是render函数就如上图所示。
所以，该版本只会包含运行时的vue代码，对于template这种需要编译，只交给webpack即可。
这会使得该版本代码的体积小。
runtime-complier版本 可以有template
如果写了template，那么就会在运行时直接编译成render函数， 而不是依靠webpack来帮助编译，这不仅仅使得该版本体积变大，而且在编译过程也会对性能有一定的损耗。
runtime-complier 解析过程:
- 将template模板转换成抽象语法树（ast）;
- 通过render函数将抽象语法树转换成虚拟DOM（vdom）;
- 将虚拟DOM转换成真正的DOM；
template => 抽象语法树(ast) => render() => 虚拟DOM(vdom) => 页面
runtime-only 解析过程：
- vue-template-compiler插件直接将组件转换成 render函数；
- 将render函数返回的虚拟DOM转换成页面；
render() => 虚拟DOM(vdom) => 页面；
总结
推荐使用 vue非完整版（runtime-only）。
优点:
- 保证用户体验，用户下载的JS文件体积更小，但支持h函数（render函数中的h）。
- 保证开发体验，开发者可以直接在vue文件里写html标签，而不写h函数
- 累活都让loader做，vue-loader把vue文件里的html转为h函数。
