小程序wx:if 和hidden的区别?

打印 上一主题 下一主题

主题 872|帖子 872|积分 2616

在微信小程序中,wx:if 和 hidden 属性都用于控制组件的表现与隐蔽,但它们在实现方式和性能上有所不同。
1. wx:if



  • 实现方式:wx:if 是条件渲染的指令,当条件为 true 时,该节点会被渲染到页面上;当条件为 false 时,该节点不会被渲染到页面上。这意味着,如果条件从 true 变为 false,相应的组件会从DOM树中移除,并且重新渲染时,如果条件重新变为 true,则会重新创建该组件。
  • 性能影响:由于 wx:if 是条件性地渲染组件,因此当条件改变时,大概会涉及到更多的DOM操纵,如创建或烧毁节点,这大概对性能有一定的影响,尤其是在处理处罚大量数据或频仍变化的场景中。但是,由于不需要在DOM中保存未表现的元素,因此在某些情况下可以节流内存。
2. hidden



  • 实现方式:hidden 是一个简朴的布尔属性,用于控制组件的表现与隐蔽。当 hidden 为 true 时,组件会被隐蔽(但仍然是DOM树的一部分),并且不会占据页面上的空间;当 hidden 为 false 时,组件会表现出来。
  • 性能影响:由于 hidden 只是简朴地控制组件的可见性,而不需要从DOM树中添加或移除组件,因此它通常比 wx:if 有更好的性能体现,特殊是在处理处罚大量数据或频仍变化的场景中。但是,由于未表现的组件仍然存在于DOM中,这大概会占用一定的内存。
总结



  • 选择 wx:if:当你需要根据条件完全决定一个组件是否存在时(即条件不满意时,该组件不应该被渲染到页面上),应该利用 wx:if。
  • 选择 hidden:当你只是需要简朴地控制组件的表现与隐蔽,而不需要完全从DOM中移除该组件时(好比,根据用户的交互行为来表现或隐蔽某些信息),应该利用 hidden。
在实际开辟中,可以根据具体场景和需求来选择利用 wx:if 还是 hidden。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

水军大提督

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表