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