小程序wx:if和hidden的区别

因为wx:if之中也可能包含数据绑定，所以当wx:if的条件值切换时，框架有一个局部渲染的过程，他会确保条件在切换是销毁或者重新渲染。同时wx:if也是有惰性的，如果初始渲染条件为false,框架什么也不会做，只有在条件第一次变为真的时候才会开始渲染。相比之下hidden就简单的多，组件始终都会被渲染，只是简单的控制显示和隐藏，一般来说，wx:if 有更高的切换消耗，而hidden有更高的初始渲染消耗，你可以根据自己的需求来调用。

wx:if是用于条件渲染，它类似于vue中的v-if，用于控制标签是否要渲染，和wx:if配合使用的有 wx:elif 和 wx:else，如果频繁切换的话，用 wx:if 将会消耗更多资源，因为每次呈现的时候他都会渲染，每次隐藏的时候，他都会销毁。

<view>
   <text wx:if="{{number === 1}}">显示一</text>
   <text wx:elif="{{number === 2}}">显示二</text>
   <text wx:else>显示三</text>
</view>

Page({
    data: {
        //控制具体显示哪个text
        number:3
    }
})

hidden是用于控制标签的隐藏，它类似于vue中的v-show，它是已经渲染的，只是通过display的block和hidden来控制显示。

<text hidden="{{hiddenBool}}">显示一</text>

Page({
    data: {
        // 控制是否显示标签
        hiddenBool:true
    }
})