v-show和v-if的区别

	v-if	v-show
显示隐藏原理	控制DOM树不渲染	display:none
频繁切换		√
动态添加或移除	√

共同点：

• 作用相同
• 用法相同
• 触发生命周期：在true和false之间切换时，都会触发beforeUpdate和updated

区别：

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

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

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