v-if 和 v-show 的区别

v-if 和 v-show 都是通过接受一个 boolean 用来控制显示和隐藏元素的指令 两个达到的效果都是一样 但是实现效果的方式有很大不同

v-if

在第一次渲染页面时，如果 v-if 的条件为假，那么页面完全不会渲染这个节点，如果为真时，会动态的向 dom 中插入节点 再变为假时会再开始局部编译卸载节点

v-show

在第一次渲染页面时无论条件为真还是假，页面都会渲染出来节点加到 dom 中，如果为真时就正常渲染，如果为假会为节点加上 display: none 的样式，通过 css 样式来达到控制节点的显示和隐藏

性能对比

v-if 肯定是比 v-show 更消耗性能的，因为 v-if 会频繁的对 dom 添加和卸载元素，而 v-show 只是简单的修改 css 样式，对性能的消耗是更小的，所以在需要频繁的切换元素显示和隐藏时可以使用 v-show，而一些场景只是对值的一个判断来决定是否显示的可以使用 v-if