微信小程序中 wx:if 和 hidden 的区别

最新推荐文章于 2024-08-24 13:00:00 发布

Y X L

最新推荐文章于 2024-08-24 13:00:00 发布

阅读量2.1k

点赞数 3

分类专栏：微信小程序

本文链接：https://blog.csdn.net/RELY_ON_YOURSELF/article/details/99294310

版权

微信小程序专栏收录该内容

15 篇文章 1 订阅

订阅专栏

关于 wx:if 和 hidden 的区别 , 小程序的官方文档上有介绍 , 但是简单的看文档可能理解的不够透彻 , 我这边通过两种场景对其进行加深理解 .

先看看文档的介绍:
在这里插入图片描述
1. wx:if 属性对小程序自带组件和自定义组件都是有效的 ; 但是hidden属性只对小程序自带组件生效 , 对自定义组件无效 . 效果图 :

很明显 , 对自定义组件设置hidden属性无效的 . 但是如果需要对自定义组件使用hidden属性怎么办 ?
方案 : 给自定义组件增加一个properties属性hidden , 然后将hidden值设置自定义组件的最外层容器上 , 看下代码 :
在这里插入图片描述
我们来看一下效果 , 这时候hidden属性就对自定义组件生效了 .

2. wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

我们通过打印组件的detached()的声明周期方法来理解这句话 :
自定义组件中添加日志代码
在这里插入图片描述
使用自定义组件的wxml文件:

<view class="container">
    <share-compt wx:if="{{isDispaly}}"></share-compt>
    <text class="btn" bindtap="onClick">点击</text>
</view>

通过点击按钮让自定义组件隐藏 , 这时候会调用自定义组件的detached()方法
在这里插入图片描述
而如果使用hidden属性来隐藏自定义组件 , 却不会调用自定义组件的detached()的生命周期方法 .

很明显的发现 , 每次去改变 wx:if 的条件的时候 , wx:if 所控制的组件都会执行一次完整的声明周期 , 而hidden在初始化之后 , 改变其值只会简单的对控件进行显示与隐藏 . 这就很好理解了文档所说的 : wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。