v-if与v-show的区别

一、v-show与v-if的共同点

在vue中，v-if与v-show的作用效果是相同的，都是控制元素在页面是否显示，他们在用法上也是相同的，当表达式为 true 时，会占据页面的位置，当表达式为false时，不会占据页面的位置

二、v-show与v-if的区别

①控制手段不同

v-show为false时，是为该元素添加了css中的display：none，dom元素依旧还在，

v-if true、false切换时，是将整个dom元素进行创建和移除

②编译过程不同

v-if切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件；

v-show的切换是基于css的切换

③编译条件不同

v-if时真正的条件渲染，他会确保在切换工程中条件块内的事件监听器和子组件适当地被销毁的重建。

v-show的切换不会触发组件的生命周期

v-if的切换会触发组件的生命周期

④性能消耗不同

v-if切换时比较消耗性能

v-show初始渲染时比较消耗性能

⑤初始渲染

v-if初始值为false时，组件不会渲染，生命周期钩子不会执行

v-if初始值是true时，组件会进行渲染，

依次执行：beforeCreate—created—beforeMount—mounted钩子

v-show无论初始状态是什么，组件都会渲染，依次执行

beforeCreate—created—beforeMount—mounted钩子

⑥切换

v-if切换：

false=>true

依次执行：beforeCreate—created—beforeMount—mounted钩子

true=>false

依次执行：beforeDestroy—destroyed钩子，代码销毁不存在页面中，没有生成代码

v-if切换

true=>false

display:none;所在的标签还是生成了代码，只是没有进行显示而已