从技术角度来说，用 v-for 渲染 100 个组件确实会比直接在页面中写 100 个静态元素消耗更多性能，但差距通常很小，对实际用户体验影响不大。具体分析如下：
1. 为什么组件化会多消耗一些性能？
- 组件实例化开销：每个组件都会创建独立的 Vue 实例，需要初始化响应式数据、生命周期等，这比纯 DOM 元素多了一些内存和计算成本。
- 虚拟 DOM 对比更复杂：组件嵌套会导致 diff 算法需要遍历更多层级的 VNode 树。
2. 100 个数量级下，这种差异可以忽略
- Vue 3 对虚拟 DOM 和 diff 算法做了大量优化（如 PatchFlag、静态提升），组件实例化的开销非常小。
- 100 个简单商品卡片组件的渲染时间通常在 10ms 以内，完全不影响首屏加载和交互流畅度。
- 真正影响性能的是：
- 商品组件内部是否包含大量图片（尤其是未懒加载）
- 是否有复杂的计算属性或 watch
- 是否频繁触发更新（如滚动时实时计算）
3. 组件化的优势远大于微小的性能损耗
| 对比维度 | 直接在页面写 | 封装成组件 |
|---|---|---|
| 可维护性 | ❌ 修改需改 100 处 | ✅ 改一处组件即可 |
| 复用性 | ❌ 无法在其他页面复用 | ✅ 任意页面引用 |
| 逻辑清晰度 | ❌ 页面代码臃肿 | ✅ 职责单一 |
| 后续扩展 | ❌ 加新功能很痛苦 | ✅ 组件内独立迭代 |
4. 如果你确实担心性能，可以做这些优化
// 1. 配合 key 提高列表复用效率
<GoodsCard v-for="item in list" :key="item.id" />
// 2. 使用 v-memo 缓存不变的部分（Vue 3.2+）
<GoodsCard v-for="item in list" :key="item.id" v-memo="[item.price, item.stock]" />
// 3. 商品图片使用懒加载
<image :src="item.img" loading="lazy" />
// 4. 避免在组件内做复杂计算，用 computed 缓存结论
100 个商品的场景下，组件化带来的代码质量和维护便利性，远远超过那几毫秒的性能损耗。只有当你遇到 数千甚至上万 个列表项时，才需要考虑虚拟滚动等方案。