Vue中runtime+compiler和runtime-only的区别(基于CLI2)

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函数

4.vue运行函数过程

在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值