v-show与v-if的区别 Vue

v-show与v-if的区别

共同点：
v-show与v-if的作用都是隐藏元素， 需要区分场合去使用v-show与v-if

区别
v-show 不管条件真假，第一次渲染都会把元素加到DOM上，通过dislpay: none属性来控制元素是否隐藏，改变CSS属性，几乎对性能没有什么影响

v-if 条件渲染，首次渲染，条件为假，什么也不操作，为真时动态向Dom添加元素。条件变为假时，局部编译卸载该元素。具有配套的v-else-if v-else，可以搭配template 使用

性能：
v-if 操作DOM， 对DOM添加删除， 消耗更多性能，更加节省内存
v-show 元素无论如何都会出现， 只是操作CSS属性，性能消耗较少，首次渲染需要消耗性能

使用场景：
判断是否需要首次渲染 切换开销：v-show较高
判断是否需要频繁切换显示隐藏 切换开销：v-if较高

如果使用在一些场景很难出现，使用v-if
如果是固定的，条件内容不改变，频繁切换的，使用v-show节省性能
如果是子组件， 每次切换不执行生命周期，使用v-show，如果子组件重新执行生命周期，那么使用v-if才可以触发