阻止 Vue 积极重用 dom 元素答案

【问题标题】：preventing Vue from aggresively reusing dom-elements阻止 Vue 积极重用 dom 元素
【发布时间】：2018-03-27 06:34:17
【问题描述】：

考虑以下sn-p：

        <template v-if="tryIsMobile" >
          <div class='device device-mobile-portrait' :class="deviceClass">
            <div class="device-scroller-container">
              <div class='device-scroller'>
                <img id='tryit-img-mobile' :src="srcUrlMobile" v-on:load="onImgLoad" v-on:error="onImgError"/>
              </div>
            </div>
          </div>
        </template>

        <template v-else>
          <div class='device device-tablet-landscape' :class="deviceClass" >
            <div class="device-scroller-container">
              <div class='device-scroller'>
                <img  id='tryit-img-tablet' :src="srcUrlTablet" v-on:load="onImgLoad" v-on:error="onImgError"/>
              </div>
            </div>
          </div>
        </template>

此代码有条件地呈现两个图像之一。某些用户操作会导致实际显示的图像被切换。

我看到的是以下内容：当从 tryit-img-mobile 切换到 tryit-img-tablet 时，作为 tryit-img-mobile 的一部分加载的图像将立即以不同的尺寸显示。但是，在图像加载它的新源 :src="srcUrlTablet" 期间，带有 src :src="srcUrlMobile" 的图像仍会显示。

这可能是由于 Vue 对两个模板使用了相同的 img-tag。如何防止 Vue 这样做，而是使用单独的 img-tags？

【问题讨论】：

在您的 device 元素上添加一个 key 属性，具有一些唯一值，例如 key="desktop" 和 key="mobile"。这将告诉 Vue 不要重用这些元素。
@JosephSilber：哎呀，这似乎已经解决了！如果你把它记下来作为回答，我很乐意接受。

标签： vue.js vuejs2

【解决方案1】：

在这种情况下，Vue 使用一个特殊的key 属性告诉它不要重用相同的元素。给每个元素这个属性一个唯一的值，Vue 将不再重复使用相同的元素：

<div v-if="tryIsMobile"
     class="device device-mobile-portrait"
     :class="deviceClass"
     key="mobile"
>
    ...
</div>
<div v-else
     class="device device-tablet-landscape"
     :class="deviceClass"
     key="tablet"
>
    ...
</div>

【讨论】：