再谈v-if和v-show（与img的前世今生）

        这是再谈系列的第二篇文章，讲的是v-if和v-show作用于加载网络图片的img标签之间的区别。众所周知，v-if 作用的标签是真正的条件渲染，具有惰性，只有当条件为真值的时候会渲染标签，在条件切换的过程中，标签会重新渲染。v-show作用的标签会都渲染出来，只不过会根据条件不同设置css的display属性值，条件为假时display设为none。

         img标签加载网络图片需要时间，网络情况不佳的情况下，加载图片的过程中img标签会变空白。一旦需要在多个img标签之间根据条件进行渲染，大多数情况应该选择v-show，这样的用户体验会更好。一旦用了v-if，切换的时候如果图片资源还未加载，就会去进行图片资源的请求，这个过程中img所在区域就会变空白了（加载时间越长，这个过程越明显），这也是为什么img需要在加载过程中给出一个加载效果，只是显示空白的话用户体验就很差了。

        下面笔者写了个小例子来对比这两种情况，先看一下v-if的情况，以下是v-if情况的动态图，注意看控制台的资源加载情况:

在网络为slow 3G的时候，我们明显的可以看到v-if 进行切换的时候，由于图片资源的请求所带来的img空白效应。 一旦图片都加载完后，再去进行切换，就会从缓存里面去取图片了，这个时候渲染就很快。

        下面是v-show的情况：

我们看到一进入页面所有的图片资源都加载好了，这个时候v-show切换就不会出现img空白情况了。 

        移动端尤其需要考虑用户体验，因为网络情况十分复杂。建议移动端的条件渲染使用v-show，毕竟谁也不希望在切换的时候对着一片空白区域发呆。

        常言道温故而知新，可以为师矣。同一个知识点，回头再去看一眼，在不同的应用场景下会有不同的体验。共勉。