Vue面试题之——v-if、v-show的区别

今天看到一个问题v-if、v-show有什么区别。有什么区别呢，脑子中只有一个v-if是对节点的删除增加做到节点的出现和隐藏的，v-show是通过添加和取消display: none，来实现可见不可见的。其他呢，想不起来了，赶紧全面了解整理一下吧。

v-if

v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。

<h1 v-if="awesome">Vue is awesome!</h1>

也可以搭配v-else使用，添加一个else块。

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

v-if必须绑定在一个元素上，如果我们想切换多个元素，可以使用<div>将多个元素包裹起来，将v-if绑定在外层<div>元素上。但是如果我们不想使用div嵌套一层元素，那么我们可以使用<template>元素将需要切换的元素包裹起来。将v-if绑定在当前<template>上。<template>与<div>不同，在渲染的时候会把<template>中的内容当作一个模块渲染，并不会渲染出<template>元素。

<template v-if="isOk">
  <button @click="incrementFun">{{$store.state.count}}</button>
</template>

v-show

v-show也是根据条件来展示元素的指令。

<h1 v-show="ok">Hello!</h1>

使用v-show进行条件判断的元素始终会被渲染并保留在DOM中。v-show只是简单的切换元素的css property display。

v-if与v-show的区别

• v-if是真正的条件渲染，切换过程会有局部编译/卸载，会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。而v-show只是通过简单的css修改，进行元素的展示和隐藏。
• v-if是惰性的，如果初始渲染条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。而v-show是无论初始条件为真假，元素总是会被渲染，只是判断是否修改css为display: none
• v-if可以搭配<template>使用，v-show不能
• v-if有对应的v-else、v-else-if，v-show没有
• v-if有更高的切换开销，v-show有更高的初始渲染开销

不同的应用场景：

• 如果需要非常频繁切换，使用v-show较好。如果在运行时条件很少改变，甚至有可能该节点一直不需要出现，使用v-if较好
• v-if可以和v-else、v-else-if搭配使用，v-show不可以。所以如果出现多条件场景，切不需要频繁切换可以使用v-if来进行判断。
• 因为v-if切换涉及到节点的渲染和卸载，所以会触发子组件的生命周期，而v-show不会触发。所以如果在切换子组件过程中需要触发子组件生命周期可以使用v-if，如果不需要可以使用v-show。