因?yàn)楣卷?xiàng)目的需求，最近在做微信小程序。公司項(xiàng)目是一個(gè)購(gòu)物類(lèi)的APP，在調(diào)試項(xiàng)目的時(shí)候遇到一個(gè)奇怪的問(wèn)題：在商品的分類(lèi)列表中，如果庫(kù)存為0的商品，商品是有一個(gè)"已售罄"的logo的。點(diǎn)擊商品列表頁(yè)進(jìn)入商品詳情頁(yè)，在商品詳情頁(yè)也會(huì)有一個(gè)"已售罄"的logo。

商品列表頁(yè)

商品詳情頁(yè)

然而如果在商品列表頁(yè)執(zhí)行頻繁點(diǎn)擊列表?xiàng)l目操作，頻繁進(jìn)入商品詳情頁(yè)，這時(shí)發(fā)現(xiàn)商品詳情頁(yè)的"已售罄"logo時(shí)而時(shí)而沒(méi)有。打開(kāi)小程序的調(diào)試按鈕，可以查看圖片的url并不為空。

已售罄圖片鏈接地址不為空

查看代碼，后來(lái)把“已售罄”logo 顯示隱藏的判斷條件換成 hidden 才算解決問(wèn)題！

用 hidden 這個(gè)判斷條件才算解決問(wèn)題

查看官方文檔，

wx:ifvshidden

因?yàn)閣x:if之中的模板也可能包含數(shù)據(jù)綁定，所有當(dāng)wx:if的條件值切換時(shí)，框架有一個(gè)局部渲染的過(guò)程，因?yàn)樗鼤?huì)確保條件塊在切換時(shí)銷(xiāo)毀或重新渲染。

同時(shí)wx:if也是惰性的，如果在初始渲染條件為false，框架什么也不做，在條件第一次變成真的時(shí)候才開(kāi)始局部渲染。

相比之下，hidden就簡(jiǎn)單的多，組件始終會(huì)被渲染，只是簡(jiǎn)單的控制顯示與隱藏。

一般來(lái)說(shuō)，wx:if有更高的切換消耗而hidden有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用hidden更好，如果在運(yùn)行時(shí)條件不大可能改變則wx:if較好。