两个版本对应的文件名
分别是vue.js(完整版) 和 vue.runtime.js(非完整版)。
区别(如图所示)
-
完整版里有编辑器compiler,有占位符或其他比较复杂的Vue语句时,可以通过分析DOM节点来修改,但是代码体积会比非完整版的大30%。可以从HTML或template直接得到视图
-
非完整版里没有编辑器compiler,体积更小,功能更弱。可以通过webpack里的vue-loader来render翻译
最佳实践
总是使用非完整版,配合vue-loader和vue文件
思路:
1 保证用户体验,用户下载的JS文件体积更小,但只支持h函数
2 保证开发体验,开发者可直接在vue文件里写HTML标签,而不写h函数
3 脏活loader做,vue-loader把vue文件里的HTML转化为h函数
用错了会怎么样
1 如果vue.js错用成vue.runtime.js:无法将HTML编译成视图
2 如果vue.runtime.js错用成vue.js:代码体积变大,因为vue.js有编译HTML的功能
template 和 render 怎么用:
vue完整版 template的使用方法:
直接写在Html上或者JS上
// 需要编译器
new Vue({
template: '<div>{{ hi }}</div>'
})
vue非完整版 render的使用方法:
render函数接收一个参数h,这个参数是vue传的;用这个参数去创建实例(可以参照上图)
// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})