wx:if 和hidden.png

参考文档

1.微信小程序--hidden不生效原因及解决方案
2.微信小程序18，建议不要使用组件的hidden属性
3.条件渲染

前提

一般来说，我隐藏view都是使用display：none的，但是最近，在form组件中，使用了hidden，用hidden隐藏组件，和form中的picker绑定name值。但是奇怪的是，我无论把hidden的值设置成false还是true，感觉变化都不大。并不知道这个hidden的正确用法在哪里？

wxml

<form bindsubmit="formSubmit">
  <view>
    <input name="name" value="" placeholder='姓名'></input>
  </view>
  <view>
     <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
      <view class="picker">
        当前选择：{{array[index]}}
      </view>
    </picker>
  </view>
  <view>
    <button size="mini" type="warn" formType="submit">Submit</button>
  </view>
  <view hidden='false'>
    <input name="city" value="{{array[index]}}"></input>
  </view>
</form>

js

Page({
  data: {
    array: ['美国', '中国', '巴西', '日本'],
    objectArray: [
      {
        id: 0,
        name: '美国'
      },
      {
        id: 1,
        name: '中国'
      },
      {
        id: 2,
        name: '巴西'
      },
      {
        id: 3,
        name: '日本'
      }
    ],
    index: 0,
    formtext:''
  },
  bindPickerChange: function (e) {
    // console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
    this.setData({
      formtext: e.detail.value.name + e.detail.value.city
    })
  }
})

style

hidden.png

无论你hidden等于true还是false，结果都是display：none。所以，一般这个基本不要设置true or false，直接<view hidden></view> 就好，相对的，由于这个因素，也不能数据绑定了。

最后（两者主要用于显示隐藏）

1.按照我的理解：display：none 和 hidden 的作用一样，显示出来的结果是一致的，都是隐藏。

display:none ： 隐藏，不占空间
hidden : 隐藏，占用空间

2.hidden不能进行动态绑定，可以使用wx：if

因为wx:if之中也可能包含数据绑定，所以当wx:if的条件值切换时，框架有一个局部渲染的过程，他会确保条件在切换是销毁或者重新渲染。同时wx:if也是有惰性的，如果初始渲染条件为false,框架什么也不会做，只有在条件第一次变为真的时候才会开始渲染。相比之下hidden就简单的多，组件始终都会被渲染，只是简单的控制显示和隐藏，一般来说，wx：if 有更高的切换消耗，而hidden有更高的初始渲染消耗，你可以根据自己的需求来调用。
wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。

wx:if 是遇 true 显示，hidden 是遇 false 显示。

wx:if 在隐藏的时候不渲染，而 hidden 在隐藏时仍然渲染，只是不呈现。

所以如果频繁切换的话，用 wx:if 将会消耗更多资源，因为每次呈现的时候他都会渲染，每次隐藏的时候，他都会销毁。
如果切换并不频繁的话，用 wx:if 相对来说较好些，因为它会避免初始就一下渲染那么多。
频繁切换：用 hidden。
偶尔切换：用 wx:if。