vue3 对组件定义的更改仅适用于组件的一个实例

Question

在编写 vue3 单文件组件时，我遇到了这个问题。我正在 for loo 中渲染这个自定义组件。发生的情况是对组件模板的任何更改（tailwind 类、dom 元素的更改等）都没有更新该组件的所有实例 - 只有最后一个或第一个实例正在更新。这是代码：

//File: CustomVenue.vue
<template>
    <div class="flex items-center">
        <img src="https://fastly.picsum.photos/id/1067/200/300.jpg?hmac=9UpH9GvB6swkUWpIG1N53lIk9vdO4YcIwlH59M8er18"
            alt="" width="100" height="100"
        >
        <span class="ml-6 text-blue-700 font-semibold text-sm">Venue name</span>
    </div>
</template>

<script setup>
    const props = defineProps({
        id: String
    });
</script>

这就是它在 for 循环中的渲染方式：

                <div class="flex flex-col gap-y-2">
                    <template v-for="(venue, index) in filteredVenues" :key="`custom_venue_${index}`">
                        <CustomVenue :id="`custom_venue_${index}`" />
                    </template>
                </div>

现阶段这是一个非常简单的组件。 我注意到的是，如果我将组件定义更改为：

<span class="ml-6 text-blue-700 font-semibold text-sm">Venue names - {{ id }}</span>

基本上只是输出 id 属性，事情看起来没问题。模板定义中的所有类更改都会影响该组件的所有渲染实例。

这是一个错误吗？如果没有，有人可以解释为什么更高版本有效吗？正如你所看到的，我什至在循环渲染时按照建议在渲染实例上添加了

:key

arritube。

Answer 1

CustomVenue.vue 中的 DOM 没有改变。 Vue3 的 Diff 算法比较新旧虚拟 DOM 树时，没有发现差异，不会执行更新，这有助于提高性能。