Vue 有两个版本，完整版（vue.js）和只包含运行时版本（vue.runtime.js）。两者关系可以简单认为是【完整版 = 运行时版本 + 编译器】。
完整版包含的编译器，可以将模板字符串编译成 JavaScript 渲染函数的代码。当我们使用完整版 Vue 时，可以将其写入 template，Vue 会自动将其转换并渲染到页面中
new Vue({
remplate: '<div>{{ n }}</div>'
})
而运行时版必须将其写入 render 函数
new Vue({
render (h) {
return h('div', this.hi)
}
})
虽然使用运行时版本更为麻烦，但运行时版本的体积比完整版大约小30%。为了用户体验，推荐总是使用运行时版本，webpack 和 @vue/cli 均默认使用运行时版。
不过在开发时，我们可以直接在 .vue 文件中写 HTML 的内容（不写 h 函数），然后使用 webpack 的 vue-loader 将 .vue 文件中的内容在构建时预编译成 h 函数。
//Demo.vue文件
<template>
<div>{{n}}</div>
</template>
<script>
export default {
data(){
return {
n: 0
}
}
}
</script>
//main.js文件
import Vue from 'vue'
import Demo from './Demo.vue'
new Vue({
el: '#app',
render(h){
return h(Demo)
}
})
| Vue完整版 | Vue运行时版 | |
|---|---|---|
| 特点 | 包含compiler | 不含compiler |
| 视图 | 写在HTML中，或者写在template中 | 写在render函数里，用h创建标签 |
| cdn引入 | vue.js | vue.runtime.js |
| webpack引入 | 需要配置alias | 默认使用 |
| vue@cli引入 | 需要额外配置 | 默认使用 |