v-if和v-show的区别，看一遍就懂

v-show

<template>
  <div class="App">
    <h1 v-show="isFind">something</h1>
    <button @click="isFind = !isFind">切换</button>
  </div>
</template>
1
2
3
4
5
6

当v-show为false的时候，dom节点显示。如图：

v-if

<template>
  <div class="App">
    <h1 v-if="isFind">something</h1>
    <button @click="isFind = !isFind">切换</button>
  </div>
</template>
1
2
3
4
5
6

使用v-if为false的时候，dom节点显示。如图：

v-if能够控制是否生成vnode(虚拟节点)，也就间接控制了是否生成对应的dom。当v-if为true时，会生成对应的vnode(虚拟节点)，并生成对应的dom元素；当其为false时，不会生成对应的vnode(虚拟节点)，自然不会生成任何的dom元素。

v-show始终会生成vnode(虚拟节点)，也就间接导致了，始终生成dom。他只是控制dom的display属性，当v-show为true时，不做任何处理；当其为false时，生成的dom的display属性为none；

使用v-if可以有效的减少数的节点和渲染量，但也会导致树的不稳定；而使用v-show可以保持树的稳定，但不能减少树的节点和渲染量。

因此，在实际开发中，显示状态变化频繁的情况下应使用v-show，以保持树的稳定；显示状态变化较少的时候应该使用v-if，以减少树的节点和渲染量.