Vue 中 v-if 和 v-show 的两个区别

v-if 和 v-show 应该有好多不同，这儿只说两个。
最近写了一段如下的代码：

<template>
  <div @click="emitter.emit('appClick')">
    <PageHeader v-if="route.path === '/'" />
    <PageHeader2 v-else />
    <component :is="currentView" :query="route.query" />
    <PageFooter />
    <el-backtop />
  </div>
</template>

这儿使用 mitt 的事件总线，在 PageHeader 和 PageHeader2 这两个组件中处理 appClick 这个事件。这两个组件中都写了如下代码：

emitter.on('appClick', hideNav)

发现在手机上，当这两个组件发生切换之后，组件内不能响应 appClick 事件了！
研究了半天，猜测是手机浏览器对内容处理的优化所致，以前就发生过在手机上切换页面链接，页面内容不改变的问题。于是将这儿的 v-if 改为 v-show，不再让这些组件不断生成和销毁了。结果，真的好用了。代码如下：

<template>
  <div @click="emitter.emit('appClick')">
    <PageHeader v-show="route.path === '/'" />
    <PageHeader2 v-show="route.path !== '/'" />
    <component :is="currentView" :query="route.query" />
    <PageFooter />
    <el-backtop />
  </div>
</template>

这是区别之一：对手机浏览器中对事件处理的影响不同。

这时发现，原来在 PageHeader 中的有些内容，在切换到 PageHeader2 时，仍然出现在屏幕上！在使用 v-if 时，没有出现这种情况。查看后，猜想是 v-show 的控制不够彻底，因为在 PageHeader 组件的模板中，在 template 中写了多个子元素，估计 v-show 没有全部控制起来。解决办法是，用一个 div 将这些元素包括在一起，让 template 中只有一个 div 子元素。果然好用！
这是区别之二：对组件中子元素的控制能力不同。v-show 不能控制组件中的多个子元素。