小程序的条件渲染
hidden
<view hidden="{{ hidden }}"></view>
当hidden属性值为false的时候,view元素才会展示。
wx:if
<view wx:if="{{ show }}"></view>
当show为true时,页面会渲染view元素
wx:if vs hidden
相同点
- 都可以控制小程序元素的展示与隐藏
区别
- wx:if是遇 true 显示,hidden 是遇 false 显示
- wx:if是惰性的,当条件为true的时候才会渲染,而 hidden 在隐藏时仍然渲染,只是不呈现。
- hidden不会触发组件的detached生命周期【重点】
hidden不会触发组件的detached
在小程序中,编写比较复杂的页面时,一般都会想到组件封装,把一个页面封装成多个小组件,然后在到页面中调用。
例如:一个页面通过条件判断是否展示音乐播放组件,并且在离开播放页面后,自动触发暂停音乐的操作
<v-music hidden="{{type}}"></v-music>
当type为false时,v-music组件展示,但是我们要实现离开当前页面后,自动暂停播放,需要用到组件的detached生命周期。
Component({
attched() {
},
detached() {
}
})
但是当我们用hidden时,是无法触发detached和attched生命周期的,因为hidden只是控制了展示与隐藏,不会重新渲染组件。
修改代码
page页面
<v-music wx:if="{{type}}"></v-music>
music组件
const audio = wx.getBackgroundAudioManager();
Component({
attched() {
},
detached() {
audio.stop();
}
})
此时就实现了自动暂停播放的功能。
总结
wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。
其实可以看出,wx:if,hidden和vue中的v-if和v-show是一样的。一个是判断是否渲染,一个是判断是否呈现。