微信小程序條件渲染hidden與wx:if的比較和不生效問題
導讀
本篇文章將爲你詳細講解微信小程序裏的hidden和wx:if這兩個屬性的使用和區別。後面也會說到hidden不生效的問題，涉及到樣式的基本知識，具體請往下看。
一、定義
hidden和wx:if都是微信小程序中通過條件來判斷是否渲染該代碼塊的控制屬性，通過布爾值(true/false)來控制組件的顯示和隱藏，基本用法也很簡單：
hidden：
<view hidden="{{condition}}"> 內容 </view>
wx:if：
<view wx:if="{{condition1}}"> 內容1</view>
<view wx:elif="{{condition2}}"> 內容2</view>
<view wx:else> 內容3 </view>
二、hidden、wx:if的區別
hidden字面意思上就是隱藏，也就是當條件爲true時隱藏內容，false時顯示內容；wx:if則剛好相反，當條件爲true的時候顯示，爲false時隱藏。
除了條件上的區別，還有最重要的一點區別是渲染過程：wx:if是動態局部渲染的，就是說當條件變換的時候，它會將內容塊實時銷燬或者重新渲染。如果初始條件是false那麼它什麼都不做，當條件變成true的時候纔開始局部渲染；而hidden只是簡單控制塊的顯示和隱藏，一開始它就加載到頁面上了。
好，下面來看個實例：
這是最基本的使用，都顯示的時候，看調試器上的Wxml面板裏面是可以看到所有的組件和內容的，現在把條件都設爲隱藏，再來看看：
重點看Wxml面板裏面的內容，可以發現 wx:if如果條件爲false在頁面加載的時候是什麼都不做的，而hidden則是無論條件是true還是false都會把代碼塊加載進來，不管怎麼都會渲染。
所以，綜上可以看出，wx:if的條件不斷變化就會不斷的渲染代碼塊，而hidden則只會在初始加載的時候渲染，那麼從性能上來說什麼情況下用wx:if什麼情況下用hidden就明顯了，如果頻繁切換條件的情況下，用hidden更好，如果條件不怎麼會改變則wx:if更好，這個也是官方建議的。
三、hidden不生效
終於講到這個問題了，相信有不少朋友踩過這個坑。明明條件是true了，怎麼還是顯示出來了，又或者明明條件是false了，怎麼不顯示了！！！
下面就來說說它，細心的朋友應該會發現，上面的第二個例子中，hidden的條件是true，隱藏內容，但是在Wxml面板裏面還是能看到代碼塊，相信你已經get到hidden是怎麼實現的。對，就是用css來控制的！如果你從Wxml面板裏面定位到hidden模塊，你會在樣式欄裏面看到view[hidden]這個樣式，然後通過display來控制顯示隱藏。
知道了這點，那麼hidden不生效的問題就清楚了，樣式被覆蓋了，解決方法也很簡單，把其他樣式裏面的display去掉就可以了，下面看個例子：
從上面可以看出hidden的display被覆蓋了，所以出現不生效的問題。至於爲什麼會覆蓋，這個就涉及到樣式優先級的知識了，在這裏也順便幫大家簡單複習一下。
先說一下css選擇器類型，一共有：
- ID選擇器(#id)
- 類選擇器(.class)
- 屬性選擇器([type=‘radio’])
- 僞類選擇器(:hover)
- 元素選擇器(div)
- 僞元素選擇器(::before)
除了這些選擇器，樣式應用還有內聯樣式和 !important 關鍵詞，那他們的優先級是：
!important >內聯樣式 > ID選擇器 > 類選擇器 = 屬性選擇器 =僞類選擇器 >元素選擇器 = 僞元素選擇器
在優先級相同的情況下，最近的設置比最遠的設置優先級高。優先級權重可以參考下面圖示，根據選擇器進行加權。
以上面的hidden的例子來說，微信框架給hidden的樣式選擇器是view[hidden]，根據上圖的權值，元素選擇器是1，屬性選擇器是10，所以加起來是11，在view上面加的兩個class，權重加起來就是20，所以比view[hidden]權重高，優先使用。
不過這裏需要說明一點，在有優先級高的加權比較時，同級的選擇器權重不能越級！比如11個類選擇器權重是110，一個ID選擇器是100，那麼按照理論來說應該會優先使用類選擇器的的樣式，但實際並不是這樣，還是優先使用ID選擇器，這裏ID選擇器優先級高，類選擇器不能加權越級，就是不會超過100；再比如11個屬性選擇器加1個元素選擇器，權重加起來是111，對比11個類選擇器，權重是110，這裏就是會優先使用111的樣式，這種情況下是可以越級的，因爲元素選擇器的優先級低，所以使用的過程中稍微注意一下這點。
至此，本篇文章結束，希望對大家有點幫助~感謝閱讀！！