深入分析Vue两个版本
一、Vue的两个版本
1.1 完整版
完整版同时包括编译器(compiler) 和 运行时(runtime) 编译器的功能是将模板字符串编译为 JavaScript 渲染函数(render函数)的代码 运行时的功能包括创建 Vue 实例、渲染并处理虚拟 DOM 等，它包括除了编译器的其他所有功能
1.2 只包含运行时版
只包含运行时版就只有运行时，没有编译器
二、两个版本的区别
| Vue完整版 | Vue只包含运行时版 | |
| 特点 | 有compiler | 没有compiler |
| 视图 | 写在HTML里，或者写在template选项里 | 写在render函数里，用h创建标签 |
| cdn引入 | vue.js | vue.runtime.js |
| webpack引入 | 需要配置alias | 默认使用 |
| vue@cli引入 | 需要额外配置 | 默认使用 |
那究竟应该使用哪一个版本呢？
最佳实践是使用 非完整版，然后用vue-loader引入compiler
整个流程思路如下：
- 对于用户来说，非完整版 （即runtime版）体积小，用户体验好，但只支持h函数
- 对于程序员来说，只能写h函数的话，开发体验不好，如果有compiler, 开发者就能写更直观更语义化的HTML标签和template, 所以我们需要一个compiler
- vue-loader就可以引入compiler, 把vue文件里的HTML标签和template 会在构建时预编译成 h函数，这样用户和开发者都高兴
三、template 和 render 的用法
// 需要编译器 new Vue({ template: '<div>{{ hi }}</div>' }) // 不需要编译器 new Vue({ render (h) { return h('div', this.hi) } })
template标签和JS里的template
//vue文件中的template标签 <template> <div id="app"> {{n}} <button @click="add">+1</button> </div> </template> //js中的template template : ` <div id="app"> {{n}} <button @click="add">+1</button> </div> `
render函数：
//不完整版在js中构建视图 render(h){ return h('div', [this.n,h（'{on:{click:this.add}’,'+1']) } //不完整版使用vue-loader //先创建一个demo.vue文件，在里面构建视图 import demo from "./demo.vue" new Vue({ el: "#app", render(h) { return h(demo) } })
三、快速在线上手Vue的神器
我们可以在codesandbox里在线写Vue的代码，不用任何本地的安装依赖
