**
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生命周期。