vue v-if和v-show的共同点和不同点?

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

truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为 假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）

 

v-show：根据条件展示元素, 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display

 v-if和v-show的共同点：

都能控制元素在页面是否显示，当表达式为true的时候，都会占据页面的位置，false相反。

v-if和v-show的不同点：

1.控制手段不同：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

2.编译过程不同：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

3.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗