前端面试题vue 系列 v-if和v-show的区别

前端面试题vue 系列 v-if和v-show的区别

v-if和v-show都是vue框架内部的指令。都可以实现代码块（元素）的在页面是否显示

原理如下：

v-if：是根据条件真假，决定是否将元素渲染到我们的DOM树上
v-show：是根据条件真假，通过css的display:none属性，来隐藏掉我们的代码块（元素）。无论条件如何都会渲染，只是是否显示的问题。

优缺点：

v-if：

优点：在初次页面渲染时，如果条件不满足（为假），将会缩短DOM的渲染时间。从而可以提高产品的用户体验度。
缺点：切换显示时，还需要重新渲染DOM，用户体验度比v-show较差些。

v-show：

优点：切换显示时，不会再重新渲染DOM，用户体验度更高些。
缺点：在初次渲染页面时，会将所有的代码块（元素）渲染完成，根据条件，判断是否显示的DOM树上。

适应场景：

v-if：

代码块（元素）较多，且用户不需要频繁点击切换时，使用v-if

v-show：

代码块（元素）较少，且用户会频繁的点击切换，使用v-show