最近天气凉了 我的心也凉了 因为组件不销毁的问题 令我头疼那个好久
众所周知 v-if和v-show的区别就是 v-show是显示隐藏 v-show是销毁和展示
最近遇到一个场景 要求一个页面渲染多个同样的萤石云视频组件
开始的想法是 没有加key值 直接使用 v-if 测试时发现 当点击切换布局时 布局改变了 尺寸未改变 视频也没有重新刷新
仔细一想这不是组件没销毁嘛 当时内心就一句卧槽涌上心头 差点对我的基础知识不自信了
在百度上好一顿查找 才晓得当渲染多个同样数据时 如果要使用v-if进行销毁时 需要加key值 以我的理解就是让浏览器知道销毁的是哪一个组件 若不加key 浏览器会默认渲染下一个组件 认为不用销毁
附上部分项目代码
<div v-if="layout === '1'" :key="'1'">
<el-row :gutter="24" style="margin-left: 50px; margin-right: 50px">
<el-col :span="24" justify="space-between">
<div
class="grid-content bg-purple-dark"
:style="{ height: this.specialHeight + 'px' }"
>
<div
class="aaa"
v-for="(item, index) in video.slice(0, 1)"
:key="index"
>
<EZUIKit
v-if="item"
:video="item"
:title="index"
:width="specialWidth"
:height="specialHeight"
/>
<div class="bbb" v-else>
<img
src="../../../assets/VideoSupervision/smallWindows/camera-close.png"
style="height: 30%; width: 20%"
alt=""
/>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<div v-else-if="layout === '4'" :key="'4'">
<el-row :gutter="24" justify="space-between">
<el-col
:span="18"
v-for="(item, index) in video.slice(0, 1)"
:key="index"
>
<div
class="grid-content bg-purple"
ref="layout2"
:style="{ height: num + 'px' }"
>
<div class="aaa">
<EZUIKit
v-if="item"
ref="EZUIKit1"
:key="new Date().getTime()"
:video="item"
:title="index"
:width="specialWidth"
:height="num"
/>
<div class="bbb" v-else>
<img
src="../../../assets/VideoSupervision/smallWindows/camera-close.png"
style="height: 30%; width: 30%"
alt=""
/>
</div>
</div>
</div>
</el-col>
<el-col :span="6" v-for="(item, idx) in video.slice(1, 4)" :key="idx">
<div
class="grid-content bg-purple"
:style="{ height: num * 0.32 + 'px' }"
>
<div class="aaa">
<EZUIKit
v-if="item"
ref="EZUIKit2"
:key="new Date().getTime()"
@switchoverURL="getVideo"
:video="item"
:title="idx + 1"
:width="specialWidth"
:height="num * 0.32"
/>
<div class="bbb" v-else>
<img
src="../../../assets/VideoSupervision/smallWindows/camera-close.png"
style="height: 30%; width: 30%"
alt=""
/>
</div>
</div>
</div>
</el-col>
</el-row>
</div>