Vue3循环渲染组件时模板修改仅生效于单个实例的问题咨询

核心原因：Vue3的静态提升与组件渲染逻辑 #

Vue3为了提升性能，会对模板中的静态内容（不依赖任何响应式数据的部分）做「静态提升」优化——把这部分内容编译到渲染函数之外，避免每次渲染都重复创建相同的DOM节点或VNode。

具体场景拆解 #

1. 无响应式props时的静态复用
   如果你的CustomVenue.vue模板里没有使用任何响应式的props（比如你提到的id），Vue会判定整个组件的模板是静态的。此时在循环渲染时，Vue会复用同一个组件VNode实例，而不是为每个循环项创建独立的实例。这就导致你修改模板后，只有那个被复用的实例（通常是首个或末个）会更新，其余实例本质上是同一个静态节点的复用，不会触发重新渲染。

2. key属性的局限
   你给循环项加了:key，这确实能让Vue区分不同的循环项身份，但key只作用于循环层面的节点比对。如果组件内部是完全静态的，Vue的优化机制会跳过组件内部的更新逻辑，因为它认为这部分内容不需要变化。

3. 使用props.id后的动态标记
   当你在CustomVenue.vue的模板中用到了props传递的id（这是响应式数据），Vue会立即把这个组件标记为动态组件，取消静态提升优化。此时每个循环项对应的组件实例都会生成独立的VNode，Vue会通过:key跟踪每个实例的状态，修改模板后所有实例都会正常触发重新渲染。

直观示例对比 #

• 静态模板（无响应式依赖）：

<!-- CustomVenue.vue -->
<template>
  <div class="p-4 bg-gray-100">固定内容</div>
</template>

Vue编译后会把这个组件的VNode提升，循环渲染时复用同一个节点，修改模板后只有单个实例更新。

• 动态模板（引入响应式props）：

<!-- CustomVenue.vue -->
<template>
  <div class="p-4 bg-gray-100" :data-id="id">内容{{ id }}</div>
</template>

<script setup>
defineProps(['id'])
</script>

此时组件模板依赖响应式的id，Vue会为每个循环项创建独立的组件实例，修改模板后所有实例都会同步更新。

内容的提问来源于stack exchange，提问作者Yeasir Arafat Majumder