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 来隐藏组件,在页面结构中根本就不会渲染这个组件:

微信小程序-WXML的hidden属性_显示隐藏

如果通过 hidden 来隐藏组件,在页面结构中是会渲染这个组件的(在 hiidden 当中 true 代表隐藏,false 代表不隐藏):

微信小程序-WXML的hidden属性_显示隐藏_02

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

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

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

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