【Vue面试题】到底如何回答v-if和v-show的区别

回答思路

1. v-if是什么
2. v-show是什么
3. 各自的使用场景
4. 从生命周期的角度分析

在整个秋招面试的过程中，很多中大厂都很看重基础，考验大家“八股”的能力，但是我觉得如果真的想回答得出彩，还是需要下一番功夫。今天面试中被问到这个问题的时候，面试官想听从生命周期的角度进行分析，所以给出参考答案，个人认为是比较出色的回答角度。

参考答案

1. v-if是动态的向DOM树内添加或者删除DOM元素、

2. v-show是通过设置DOM元素的display样式控制显隐，只是简单的基于css切换

3. 使用场景：如果需要频繁切换，则使用v-show, 如果在运行时条件很少改变，则使用v-if较好

4. 从生命周期的角度分析：

   （1）挂载阶段（mounted） v-if:当条件为真时，元素及其子元素才会被挂载到 DOM 中。如果初始条件为假，这些元素不会出现在 DOM 中，也不会触发对应的挂载（mounted）生命周期钩子函数。只有当条件变为真，元素被添加到 DOM 时，才会触发挂载钩子。

   （2） 更新阶段（updated） v-if：当条件从假变为真时，会重新编译和挂载元素，触发创建（create）和挂载（mounted）相关的生命周期钩子函数（如果组件有这些钩子）。当条件从真变为假时，元素会被从 DOM 中移除，触发销毁（destroyed）生命周期钩子函数（如果组件有）。

   （3）销毁阶段（beforeDestroy 和 destroyed） v-if：当v-if条件变为假，且元素被从 DOM 中移除时，会触发组件的 beforeDestroy 和 destroyed 生命周期钩子函数（如果组件有），在这两个钩子函数中可以进行一些清理工作，如清除定时器、取消订阅等。