小程序中hidden不会触发组件的detached

小程序的条件渲染

hidden

<view hidden="{{ hidden }}"></view>

当hidden属性值为false的时候，view元素才会展示。

wx:if

<view wx:if="{{ show }}"></view>

当show为true时，页面会渲染view元素

wx:if vs hidden

相同点

1. 都可以控制小程序元素的展示与隐藏

区别

1. wx:if是遇 true 显示，hidden 是遇 false 显示
2. wx:if是惰性的，当条件为true的时候才会渲染，而 hidden 在隐藏时仍然渲染，只是不呈现。
3. 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是一样的。一个是判断是否渲染，一个是判断是否呈现。