当前位置:网站首页>render函数与虚拟dom
render函数与虚拟dom
2022-07-04 19:48:00 【bug丸】
render函数与虚拟dom
虚拟dom
是什么:用来描述dom的js对象
作用:vue在更新真实DOM前,虚拟dom会进行diff运算,比较更新前后虚拟DOM结构中的有差异的部分,然后采用异步更新队列的方式将差异的部分更新到真实DOM中,从而减少了最终要在真实DOM上执行的操作次数,提高了页面渲染的效率
let vDom = {
tag: "div",
attributes: {
id: "vdom",
},
children: {},
};
从模板到真实dom:
模板 -> 进行编译 -> 成render函数 -> 虚拟dom -> 真实dom
如果直接使用render函数,就省略了模板的编译过程,vue运行的更快
render函数
render函数就是用于实现虚拟dom的
使用render函数代替模板功能
不再需要使用vue内置指令,也没法使用,我们都可以通过原生js来实现
render函数通过createElement参数来创建虚拟dom;
createElement构成了vue virtual dom的模板,它有三个参数:
第一个参数必选:可以是一个html标签,也可以是一个组件或函数
第二个参数可选:数据对象,该dom节点的配置
第三个参数可选:组节点
<script>
export default {
render: (createElement) => {
return createElement(
// 第一个参数:必选,标签名
"div",
// 第二个参数:可选对象,标签相关信息
{
// 与 `v-bind:class` 的 API 相同,
// 接受一个字符串、对象或字符串和对象组成的数组
class: {
baseClass: true,
bar: false,
},
// 与 `v-bind:style` 的 API 相同,
// 接受一个字符串、对象,或对象组成的数组
style: {
color: "red",
fontSize: "16px",
},
// 普通的 HTML 特性
attrs: {
id: "foo",
},
// 组件 prop
props: {
myProp: "bar",
},
// DOM 属性
// domProps: {
// innerHTML: `爱你`,
// },
// 事件监听器在 `on` 属性内,
// 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
on: {
click: function() {
console.log(6688);
},
},
},
// 第三个参数:可选数组,子节点相关
["爱你!", createElement("p", ["么么哒"])]
);
},
};
</script>
<style lang="less" scoped>
.baseClass {
background: #ccc;
}
</style>
.baseClass {
background: #ccc;
}
</style>
边栏推荐
猜你喜欢
[in-depth learning] review pytoch's 19 loss functions
太方便了,钉钉上就可完成代码发布审批啦!
Four traversal methods of binary tree, as well as the creation of binary tree from middle order to post order, pre order to middle order, pre order to post order, and sequence [specially created for t
[server data recovery] a case of RAID5 data recovery stored in a brand of server
Automatic generation of interface automatic test cases by actual operation
面对同样复杂的测试任务为什么大老很快能梳理解决方案,阿里十年测试工程师道出其中的技巧
Pytorch---使用Pytorch实现LinkNet进行语义分割
How does win11 search for wireless displays? Win11 method of finding wireless display device
NetCore3.1 Json web token 中间件
【服务器数据恢复】某品牌服务器存储raid5数据恢复案例
随机推荐
Practical examples of node strong cache and negotiation cache
[ismb2022 tutorial] the picture shows the precision medicine of learning. Marinka zitnik, Harvard University, keynote speaker, with 87 ppt
Understand Alibaba cloud's secret weapon "dragon architecture" in the article "science popularization talent"
BFC interview Brief
Advantages of semantic tags and block level inline elements
Ten years' experience of byte test engineer directly hits the pain point of UI automation test
Win11亮度被锁定怎么办?Win11亮度被锁定的解决方法
剑指 Offer II 80-100(持续更新)
Flet tutorial 07 basic introduction to popupmenubutton (tutorial includes source code)
RFID仓储管理系统解决方案的优点
【服务器数据恢复】某品牌服务器存储raid5数据恢复案例
ACM组合计数入门
word中插入圖片後,圖片上方有一空行,且删除後布局變亂
HMS Core 机器学习服务
Common verification rules of form components -1 (continuously updating ~)
jekins初始化密码没有或找不到
九齐NY8B062D MCU规格书/datasheet
【申博攻略】六.如何联系心仪的博导
GVM use
伦敦银走势图分析的新方法