v-if 与 v-show的区别及对生命周期的影响

两者的区别

(1) v-if 的原理是根据判断条件来动态的进行增删DOM元素，只有v-if的值为true时,元素才会存在于html页面中；
     v-show是根据判断条件来动态的进行显示和隐藏元素，是通过修改DOM元素的display属性来实现的，无论v-show的值为true或者false,元素都会存在于html页面中。

(2) 只有v-if能和v-else连用进行分支判断，v-show是不能和v-else连用的，如果出现多种条件场景的情况下，可以使用v-if来进行判断

(3) 如果需要非常频繁地切换,使用v-show比较好,如果在运行时条件不会改变时,用v-if比较好

应用场景：频繁的进行增删DOM操作会影响页面加载速度和性能，由此：

• 当项目程序不是很大的时候，v-if和v-show都可以用来进行判断展示和隐藏（这种场景使用v-if只是影响不大，并不是没有影响）；
• 当项目程序比较大的时候，不推荐使用v-if来进行判断展示和隐藏，推荐使用v-show；　　　　

 

对生命周期的影响

v-if - 初始渲染：

初始值为 false 组件不会渲染，生命周期钩子不会执行，v-if 的渲染是惰性的。
初始值为 true 时，组件会进行渲染，并依次执行 beforeCreate,created,beforeMount,mounted 钩子。

v-if - 切换：

false => true：依次执行 beforeCreate, created, beforeMount, mounted 钩子。
true => false：依次执行 beforeDestroy, destroyed 钩子。

v-show - 渲染：

无论初始状态，组件都会渲染，依次执行 beforeCreate, created, beforeMount, mounted 钩子，v-show 的渲染是非惰性的。

v-show - 切换：

对生命周期钩子无影响，切换时组件始终保持在 mounted 钩子。