Vue3 兼容踩坑：v-once 与 v-if 混用问题

这是 vue2 项目升级到 vue3 踩的一个小坑坑，这里记录一下，分享给大家~

一、 问题

下面这句代码是首次加载骨架屏组件。该段代码在vue2运行中无任何问题，项目整体升级成vue3后就出现骨架屏一直存在，不消失的问题。

<CardSkeleton v-once v-if="index === 0"></CardSkeleton>
<div v-else-if="index === 1">业务逻辑</div>
...

二、 原因

为什么在vue3里，index值已经变为1了，骨架屏依然存在呢？
原因是 v-once 和 v-if="index=== null" 导致了一次性选然后，再也不会被销毁。

1. 页面刚加载时，index === null，v-if 条件成立，组件被创建。

2. 同时 v-once 生效，这个组件被标记为[一次性渲染]，vue 不会再对它进行任何更新或销毁。

3.后续 index 变成1或变成2，虽然 v-if 条件不成立了，但 v-once 让 vue 跳过了销毁逻辑，骨架屏组件就一直留在页面上了。

三、 解决方案

想只渲染一次，换成 v-show写法

<CardSkeleton v-show="index === 0"></CardSkeleton>
<div v-if="index === 1">业务逻辑</div>

如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！
最后：写作不易，如要转裁，请标明转载出处。