1. 相同点:
v-show 和 v-if 都能控制元素的显示和隐藏。
2. 不同点:
实现本质方法不同
v-show 本质就是通过设置 css 中的 display 设置为 none,控制隐藏
v-if 是动态的向 DOM 树内添加或者删除 DOM 元素
3. 性能比较
v-show 只编译一次,后面其实就是控制 css,因此切换开销比较小,初始开销较大
而 v-if 不停的销毁和创建, 因此初始渲染开销较小,切换开销比较大
而 v-if 不停的销毁和创建, 因此初始渲染开销较小,切换开销比较大
4. 适用场景
如果要频繁切换某节点时,使用 v-show,如果不需要频繁切换某节点时,使用 v-if
为什么避免 v-if 和 v-for 用在一起
当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,通过 v-if 移动到容器元素,不会再重复遍历列表中的每个值。取而代之的是,我们只检查它一次,且不会在 v-if 为否的时候运算 v-for。