v-if 不加 key的后果

最近天气凉了 我的心也凉了 因为组件不销毁的问题 令我头疼那个好久

众所周知 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>