Vue滚动加载对象列表时全量重渲染问题排查

问题分析 #

你遇到的全量重渲染问题，核心是两个操作失误导致的：

1. watch监听逻辑写法错误，触发了不必要的响应式更新
2. v-for的key未遵循Vue的元素复用规则（非唯一/不稳定）

修正方案 #

1. 修复useElements中的监听逻辑

你原来的watch写法没有正确监听data的变化，导致响应式更新逻辑异常。正确做法是直接监听useFetch返回的响应式data对象，仅在新数据返回时追加到列表：

// useElements.vue
import { ref, watch } from 'vue'
import useFetch from './useFetch'

const list = ref(1)
const { data, isLoading, error } = useFetch(list)
// 初始化列表数据，替换为你的真实初始数据
const elements = ref([
  // { uniqueId: 'item-1', name: '初始元素1' },
  // { uniqueId: 'item-2', name: '初始元素2' }
]) 

const showNext = () => { 
  list.value += 1
}

// 正确监听data变化，仅追加新数据
watch(data, (newData) => {
  // 确保新数据有效时再追加
  if (newData?.length) {
    elements.value.push(...newData)
  }
})

return {
  elements,
  showNext,
  isLoading,
  error
}

2. 确保v-for的key唯一且稳定

Vue依赖key判断列表元素是否需要复用，必须绑定每个元素全局唯一的标识（比如后端返回的id、uniqueId等），绝对不能用数组索引作为key：

<!-- Main.vue -->
<template>
  <!-- 假设你用自定义指令@scroll.up监听向上滚动，原生scroll事件需自行处理滚动方向判断 -->
  <div @scroll.up="loadMore" style="overflow-y: auto; height: 400px;">
    <div 
      v-for="element in elements" 
      :key="element.uniqueId" <!-- 绑定元素唯一标识 -->
    >
      {{ element.name }}
    </div>
    <!-- 增加加载状态，避免重复请求 -->
    <div v-if="isLoading" style="text-align: center; padding: 10px;">加载中...</div>
  </div>
</template>

<script setup>
import { useElements } from './useElements'

const { elements, showNext, isLoading } = useElements()

const loadMore = () => {
  // 加载中时禁止触发新请求
  if (!isLoading) {
    showNext()
  }
}
</script>

3. 额外优化：防止重复请求

在loadMore中增加加载状态判断，避免用户快速滚动触发多次重复请求，减少不必要的响应式更新。

为什么之前会全量重渲染？ #

• 错误的watch写法可能导致elements被错误触发更新，或每次都重置数组而非追加
• 如果key用了索引或非唯一值，Vue无法识别新旧元素，只能全量重新渲染列表

内容的提问来源于stack exchange，提问作者Hssan Bouzlima