v-if vs v-show

v-if

官方文档：
v-if is “real” conditional rendering because it ensures that event
listeners and child components inside the conditional block are
properly destroyed and re-created during toggles.

v-if is also lazy: if the condition is false on initial render, it
will not do anything - the conditional block won’t be rendered until
the condition becomes true for the first time.

v-if是真正意义上的条件渲染因为他本身包括的事件以及他的子组件都会执行条件渲染（销毁和重建）

在render进程中不会执行Dom树的构建以及后续的css等渲染

v-show

官方文档：
In comparison, v-show is much simpler - the element is always rendered
regardless of initial condition, with CSS-based toggling.

与v-if比较v-show不管初始状态是什么元素都会渲染，css基础切换

在render进程中，不会渲染不可见元素
理解这句话首先要弄清楚浏览器是如何渲染的：

1. 从DOM树的根节点开始遍历每个可见节点。
2. 对于每个可见的节点，找到CSSOM树中对应的规则一一对应
3. 根据每个可见节点以及其对应的样式，组合生成渲染树。

而对于display:none的元素首先会进行第一步的Dom树解析以及第二步的CSSOM树解析，但不会生成display:none的render树。会加载但不会渲染

可以试一下

 <style>
.img-yellow {
     background-image: url(./vuePro/webpack-vue2/src/assets/1.jpg);
 }
 </style>
 <div style="display:none">
     <img src="./vuePro/webpack-vue2/src/assets/3.jpg">
     <div class="img-yellow"></div>
 </div>

图片资源请求如下：

可以自行对比看下display:block的请求结果

v-if vs v-show

官方文档：
Generally speaking, v-if has higher toggle costs while v-show has
higher initial render costs. So prefer v-show if you need to toggle
something very often, and prefer v-if if the condition is unlikely to
change at runtime.

通常来说，v-if有更高的toggle成本而v-show有更高的初始化渲染成本，所以如果你需要toggle频率相对高的话倾向使用v-show，反之如果条件运行不太可能更改则选择v-if

参考文章：
https://segmentfault.com/a/1190000010032501