条件渲染wx:if

小程序中使用 wx:if="{{condition}}" 进行条件渲染，当condition为true时，携带 wx:if 这个可知属性的标签才会被渲染显示。

之前在项目中就遇到过一个问题：
页面的wxml如下：

jobDetail.wxml

但在小程序开发工具调试器窗口中：

xml调试器窗口

结合两张图渲染顺序可以看出，image是最后渲染加在页面上的，但从DOM结构来看，image应该会早于white-bgView先渲染。那么导致实际与预期出现偏差但原因是什么呢？

查看image标签，可以猜测应该wx:if控制属性影响的，为验证猜想，去掉wx:if属性后，小程序调试器xml窗口显示结构如预期：

去掉wx:if后

再回头看官方文档也有提到， wx:if是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
这也可以很好的解释为何增加了 wx:if后的 image被加在 DOM树底部， jobDetail页面的 jobInfo.banner_url是网络请求得到的，一开始进入页面，在请求完成前为空，所以这时的渲染条件为 false， DOM跳过 image元素渲染 whit-bgView。等到页面数据请求成功后， jobInfo.banner_url有值， wx:if的条件变为 true，页面会进行局部渲染显示 image。

Tip：官方文档也将wx:if和hidden进行比较，在具体实际使用中如何选择有很大帮助。

wx:if VS hidden