Vue v-show和v-if的区别及使用场景

最近在撸一个后台管理系统，结合步骤条和表格(复选)，但是利用上一步返回到表格时，表格的选中状态就没了，查了一些资料，最后发现是渲染方式不对，特此记录。

问题分析

最开始的做法是每个步骤一个div，然后在每个div中使用v-if判断是否是当前步骤，如果是，则显示相应的div，不是则隐藏。
这样写，每一步正常走下来没有问题，但是如果返回上一步，部分DOM的状态就会丢失，这是为什么呢，先来看看vue官方对v-if的定义:

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

这里需要注意，渲染并不包含DOM状态，比如checkbox的选中状态，仅仅只包括表格数据的渲染，这就是问题的本质。

那么再来看看vue官方对v-show的定义：

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

从带有 v-show 的元素始终会被渲染并保留在 DOM 中可以看出，v-show所包含的DOM，并不会被销毁和重建，所以DOM状态也不会消失。

总结下：
使用v-if渲染DOM，当条件改变时，VUE会销毁或重建相应的DOM
使用v-show渲染DOM，当条件改变时，VUE仅仅只会改变DOM的CSS

再贴一下vue官方对v-if和v-show的对比及推荐用法：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

在使用时，根据具体情况选择即可。