vue初始化项目是选择compiler还是选择only
vue程序运行过程
本文即根据此视频学习整理:链接: 2019年最全最新Vue、Vuejs教程,从入门到精通.
在vue实例挂载前:
① 是否有定义render函数,如有定义直接生成虚拟dom,然后覆盖el属性在页面挂载的节点。
② 当没定义render函数,看是否有template属性,如果有就编译成抽象语法树(ast),然后编译到render函数中,生成虚拟dom,最终覆盖el属性在页面挂载的节点。
③ 当没定义render函数并没有template属性时,则将el挂载的外部html编译成语法树(ast),然后编译到render函数中。生成虚拟dom,最终覆盖el属性在页面挂载的节点。
compiler与only的区别
runtime-compiler
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
runtime-only
new Vue({
el: '#app',
render : h => h(App)
})
vue挂载过程 : 模板 -> 抽象语法树 -> 编译成render函数 -> 翻译成虚拟DOM -> 渲染正式DOM
根据挂载过程可以看出, only : 从render开始走 ,性能高,代码少。 compiler : 从头走到尾
那么render函数
做了什么呢?
render函数其实就是用createElement()创建标签到虚拟dom上。 (自己理解的如果不对请指出)
// render:h => h(App) 等同于下面的
new Vue({
el: '#app',
render : function(createElement){
return createElement(App)
}
})
// render函数其实就是用createElement创建标签到虚拟dom上。 (自己理解的如果不对请指出)
/*
h === createElement
普通用法 : createElement("标签",{标签属性},内容);
嵌套用法 : createElement("标签",
{标签属性},
createElement("标签",{标签属性})
);
对象用法: createElement(组件对象);
*/
问题 : 如果用only ,那么在 vue文件 中的 template模块 怎么编译?
答: 在引入main.js时已经编译成render函数了。
因为CLI安装了 vue-template-compiler,他帮助我们将所有vue文件template都编译了。