Vue重要面试题：v-if和v-show的区别

1.两者基本用法

根据Vue官方文档

v-if：根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。

当条件变化时该指令触发过渡效果。

v-show：根据表达式之真假值，切换元素的 display CSS property。

当条件变化时该指令触发过渡效果。

由上可知v-if 和 v-show 都是用来控制动态显示或影藏 DOM 元素的

2.二者区别

v-show：严格意义上属于”条件隐藏“，浏览器在渲染网页时会根据条件，符合的就渲染出来，不符合的就display为none，但是元素还在

v-if：是真正意义上的条件隐藏，浏览器先判断符不符合条件，符合条件的再渲染，否则不渲染DOM，浏览器中不存在这个DOM。

3.在性能上的区别

1、v-if有更高的切换开销，v-show有更高的初始渲染开销。如果需要频繁的切换，使用v-show比较好，如果运行条件很少改变，使用v-if比较好。

2、v-show比v-if性能更高，因为v-show只能动态的改变样式，不需要增删DOM元素。所以当程序不是很大时候，v-if和v-show区别都不大，如果项目很大，推荐多用v-show，较少浏览器后期操作的性能。

3、需要多种条件场景，比如id=1，=2，=3.....时候，因为只有v-if，可以和v-else等连用，这种比较适合用v-if

4、v-show不支持<template>语法

5、v-if切换时候回实时的销毁和重建内部的事件、钩子函数等，v-show只会初始化渲染时候执行，再切换时候不会执行生命后期的过程。