Vue中runtime+compiler和runtime-only的区别(基于CLI2)
程序员文章站
2022-07-14 09:18:23
...
1.main.js文件
左边是runtime+compiler中的main.js文件,右边是runtime-only中main.js文件。
vue程序运行过程:
①template转成抽象语法树(ast)
②抽象语法树转译成render函数
③rander函数形成virtual dom
④virtual dom转成真正的dom
runtime+compiler中的main.js文件的编译过程:template => ast => render => vdom => UI;
runtime-only中main.js文件的编译过程:render => vdom => UI
结论:1.runtime-only的性能会更高;2.runtime-only的处理代码量更少;3.用runtime-only会比用runtime+compiler轻6kb
2.render函数
render: function(createElement){
//1.普通用法:createElement('标签', {标签的属性},[标签包含的内容])
return createElement('h2', {class:'box'},
['Hello World!', createElement{'button',['按钮']}])
//2.传入组件对象
return createElement(cpn)
}
此时,第一个createElement中创建的标签会替换el挂载的标签;
3.关于.vue文件的template是由谁处理呢?
是由vue-template-compiler处理,编译成成render函数