前端之v-if与v-show

v-if与v-show的区别

1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；

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

3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

使用场景

v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;

v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。

如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

vue生命周期钩子

v-if

初始渲染

初始值为 false 组件不会渲染，生命周期钩子不会执行，v-if 的渲染是惰性的。
初始值为 true 时，组件会进行渲染，并依次执行 beforeCreate,created,beforeMount,mounted 钩子。

切换

false => true
依次执行 beforeCreate,created,beforeMount,mounted 钩子。
true => false
依次执行 beforeDestroy,destroyed 钩子。

v-show

初始渲染

无论初始状态，组件都会渲染，依次执行 beforeCreate,created,beforeMount,mounted 钩子，v-show 的渲染是非惰性的。

切换

对生命周期钩子无影响，切换时组件始终保持在 mounted 钩子。

注意

如果已经在css中明确写出display : none 的话，在v-if中就算设置v-if为true也是不能让元素显示的，因为他没办法覆盖或者修改掉css里面的