防止Vue过度重用dom元素

Question

考虑以下代码片段：

        <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="srcUrlMobile"的图片。

这可能是因为Vue在两个模板中使用相同的img标签。我该如何防止Vue这样做，而是使用单独的img标签？

- Geert-Jan

---

在你的“device”元素上添加一个“key”属性，赋予一些唯一的值，例如“key = desktop”和“key = mobile”。这将告诉Vue不要重复使用这些元素。 - Joseph Silber

@JosephSilber：哇，那似乎解决了！如果你把它记下来作为答案，我很乐意接受。 - Geert-Jan

Answer 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>

- Joseph Silber