面试官：在vue中v-if和v-show的区别？

一. v-show与v-if的相同点 

        在 vue 中 v-show 与 v-if 的作用效果是相同，都可以动态控制着dom元素的显示隐藏。

        当表达式结果为 true 时，都会占据页面的位置

        当表达式都为 false 时，都不会占据页面位置

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

      

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

v-if初始值是true时，组件会进行渲染，依次执行：beforeCreate—created—beforeMount—mounted钩子；

v-show无论初始状态是什么，组件都会渲染，依次执行beforeCreate—created—beforeMount—mounted钩子

        控制手段：v-show控制显示隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

        编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换。

v-if切换：false=>true 依次执行：beforeCreate—created—beforeMount—mounted；

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

v-show切换 true=>false，为该元素添加css--display:none;所在的标签还是生成了代码，只是没有进行显示而已

        编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

        性能消耗：v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，v-if有更高的切换消耗；v-show有更高的初始渲染消耗；     

三、v-show与v-if的使用场景

v-if 与 v-show 都能控制dom元素在页面的显示

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

注意，v-show 不支持 <template> 元素，也不支持 v-else。

此外，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，所以不推荐同时使用v-if 和 v-for。