hidden 和 wx:if

1. 二者区别

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

wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。

wx:if 是遇 true 显示，hidden 是遇 false 显示。

他们还有一层细微的区别：

wx:if 在隐藏的时候不渲染，而 hidden 在隐藏时仍然渲染，只是不呈现。

所以如果频繁切换的话，用 wx:if 将会消耗更多资源，因为每次呈现的时候他都会渲染，每次隐藏的时候，他都会销毁。

如果切换并不频繁的话，用 wx:if 相对来说较好些，因为它会避免初始就一下渲染那么多。

总结

频繁切换：用 hidden。
偶尔切换：用 wx:if。

2. hidden 隐藏无效

 <view hidden="true" style="display:flex;flex-direction: row;">
        <text>text1</text>
        <text>text2</text>
    </view>

上述布局中，hidden 无效，原因是该组件设置了“display:flex”。
解决方案：动态修改display 属性，让其随着hidden的变化而变，hideview 为 js 中控制动态显示的变量，如下：

<view hidden="{{hideview}}" style="display:{{hideview ? none : flex}};flex-direction: row;">
      <text>text1</text>
      <text>text2</text>
 </view>

参考链接：https://www.cnblogs.com/xuzhengzong/p/7338178.html