hidden 属性

• 在 Vue 中我们可以通过 v-show 来控制组件是否显示
• 在小程序中所有组件都支持hidden属性，我们可以通过hidden属性来控制组件是否显示隐藏

wx:if和hidden的区别

和 Vue 中 v-if/v-show 一样，不经常切换使用 v-show(wx:if)，经常切换使用 v-if(hidden属性)

?> 官方解释：因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

wx:if

如果通过 wx:if 来隐藏组件，在页面结构中根本就不会渲染这个组件：

如果通过 hidden 来隐藏组件，在页面结构中是会渲染这个组件的（在 hiidden 当中 true 代表隐藏，false 代表不隐藏）：

也正是因为这个区别，就决定了它们不同的应用场景：

• 如果组件不需要频繁的切换（隐藏和显示之间），那么用wx:if
• 如果组件需要频繁的切换（隐藏和显示之间），那么用hidden

原因很简单，因为hidden会将组件渲染到页面结构中，只是通过修改display属性来实现隐藏和切换，所以不怎么消耗性能。

而 wx:if 不会将组件渲染到页面结构中，每次显示都会重新创建组件，比较消耗性能。