vue keep-alive 与 v-if 同时使用时的注意事项

**

vue keep-alive 与 v-if 同时使用时的注意事项

**

    <keep-alive>
      <myCom v-if="keyVal" />
      <otherCom v-else />
    </keep-alive>

在切换keyVal的值为false和true时，当第一次切换到两个组件的时候，myCom 与 otherCom 的mounted、activated生命周期都会被触发（先mounted后activated），等再次切换回来的时候，只会触发activated，注意此处也可以用component is的形式代替，效果是同样的，代码规范上也更合适一些。

   <keep-alive>
      <component :is="keyVal?'myCom':'otherCom '"></component>
    </keep-alive>

注意点：正常理解v-if会删除dom重新创建，但是组件外套keep-alive之后，虽然确实会移除dom（你可以打开控制台发现dom确实被移除了），但是dom结构会保存在缓存中，当被v-if为true时候直接搬回来，并不会再重新绘制dom，就不会激发mounted生命周期。