微信小程序条件渲染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的样式，这种情况下是可以越级的，因为元素选择器的优先级低，所以使用的过程中稍微注意一下这点。
至此，本篇文章结束，希望对大家有点帮助~感谢阅读！！
