vue根据结构组成可以分成俩个版本:
runtime -only和runtime -complier。下面用简称表示:
complier版本也是完整版本。包含有编译器和运行时俩个方面。
only版本只包含运行时。
编译器作用是啥呢?就是把template模板字符串先解析成ast抽象语法树,然后呢转成render渲染函数的代码。
运行时呢:就是利用渲染函数创建vue实例,渲染并处理成虚拟DOM的代码,最后转成现在我们能看到的UI界面。
这样一看,only版本的简洁性是远大于complier,最起码省略了前面到渲染函数代码的过程。所以代码量更少,性能也更高。
我们来看下面代码:
示例图
当使用 vue-loader 或 vueify 的时候,*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的,所以只用运行时版本即可。
因为运行时版本相比完整版体积要小大约 30%,所以应该尽可能使用这个版本。如果你仍然希望使用完整版,则需要在打包工具里配置一个别名:
webpack.config.js配置文件里加一个别名
针对这个:// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})
其实h函数指代的就是js的createElement('标签名',{标签的属性和属性值,键值对形式},[‘内容字符串’])
有个注意的点,如果使用only版本,必须要安装 vue-loader和vue-template-comiler为了加载vue格式文件,和编译vue文件。