Vue有两个版本，分别是完整版和非完整版（runtime）
完整版
- 完整版同时包括编译器(compiler) 和 运行时(runtime)
- 编译器的功能是将模板字符串编译为 JavaScript 渲染函数(render函数)的代码
- 运行时的功能包括创建 Vue 实例、渲染并处理虚拟 DOM 等，它包括除了编译器的其他所有功能
非完整版
- 只包含了运行时，没有编译器
区别
| 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区别
//vue文件中的template标签
<template>
<div id="app">
{{n}}
<button @click="add">+1</button>
</div>
</template>
//js中的template
new Vue({
el: '#app',
template: `
<div id="app">
{{n}}
<button @click="add">+1</button>
</div>
`
data: {
n: 0
}
})
使用render函数：
//不完整版在js中构建视图
render(h){
return h('div', [this.n,h（'{on:{click:this.add}’,'+1'])
}
//先创建一个demo.vue文件，在里面构建视图
import demo from "./demo.vue"
new Vue({
el: "#app",
render(h) {
return h(demo)
}
})
在线Vue编辑器
无需本地配置安装，即可快速在codesandbox里在线写Vue的代码
https://codesandbox.io/s/tender-sutherland-ofzvk
codesandbox.png
