[vue小知识] v-show 和 v-if 指令的共同点和不同点?

1. 相同点：

v-show 和 v-if 都能控制元素的显示和隐藏。

2. 不同点：

实现本质方法不同

v-show 本质就是通过设置 css 中的 display 设置为 none，控制隐藏

v-if 是动态的向 DOM 树内添加或者删除 DOM 元素

3. 性能比较

v-show 只编译一次，后面其实就是控制 css，因此切换开销比较小，初始开销较大
而 v-if 不停的销毁和创建, 因此初始渲染开销较小，切换开销比较大

4. 适用场景 

如果要频繁切换某节点时，使用 v-show，如果不需要频繁切换某节点时，使用 v-if

为什么避免 v-if 和 v-for 用在一起

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过 v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。