003-前端面试-vue之v-show和v-if的区别

前言：当面试官问这个问题的时候，我们要从三个维度去回答
1、什么是v-if和v-show
2、v-if和v-show的区别
3、v-if和v-show的使用场景
（注：对于内容可能的延伸面试题都利用超链接的形式展示，点击蓝色字体即可查看！！）
面试不发愁，关注前端课代表，啊哈~

v-if和v-show都是用来控制元素在页面上是否显示的，当表达式为true的时候，都会占据页面位置；当表达式为false的时候，都不会占据页面位置。

v-if和v-show的区别

• 控制手段不同
  v-show的显示和隐藏主要是通过给元素设置css——display:block、display:none来实现的，dom元素依旧存在；v-if的显示和隐藏主要是将这区域里的dom元素整个销毁和创建的。
• 编译过程不同
  v-if的切换是有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件；v-show只是简单的基于css的切换。
• 触发生命周期不同
  v-show由false变为true的时候不会触发组件的生命周期；v-if由false变为true的时候触发组件的beforeCreate、created、beforeMount、mounted钩子函数，由true变为false的时候触发组件的beforeDestory、destoryed钩子函数。

v-if和v-show的使用场景
在性能方面，由于v-if有更高的切换消耗，而v-show有更高的初始化消耗，所以如果需要非常频繁的切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。