Vue3无限滚动：从卡顿到丝滑的性能优化指南-优快云博客

Vue3无限滚动：从卡顿到丝滑的性能优化指南

【免费下载链接】core vuejs/core: Vue.js 核心库，包含了 Vue.js 框架的核心实现，包括响应式系统、组件系统、虚拟DOM等关键模块。项目地址: https://gitcode.com/GitHub_Trending/core47/core

你是否遇到过这样的情况：页面加载了上千条数据后，滚动变得卡顿，甚至出现浏览器崩溃？传统分页需要用户手动点击下一页，而无限滚动可以在用户滚动到页面底部时自动加载更多内容，但实现不当会导致严重的性能问题。本文将带你了解如何使用Vue3实现高效的无限滚动，平衡加载性能与用户体验。

传统分页 vs 无限滚动

方案	优势	劣势	适用场景
传统分页	实现简单，用户可跳转页码	频繁点击，体验割裂	数据量少、需精确定位
无限滚动	操作流畅，沉浸感强	初始加载慢，滚动卡顿	大数据列表、社交媒体流

无限滚动的核心挑战在于：如何在滚动过程中高效更新DOM，避免因节点过多导致的性能下降。Vue3的响应式系统(packages/reactivity/src/)和虚拟DOM(packages/runtime-core/src/vnode.ts)为解决这一问题提供了基础支持。

基础实现：Vue3组合式API

以下是一个基于Vue3组合式API的无限滚动实现，使用了响应式数据和滚动事件监听：

<div class="infinite-list" ref="listContainer">
  <div v-for="item in items" :key="item.id" class="list-item">
    {{ item.content }}
  </div>
  <div v-if="loading" class="loading">加载中...</div>
</div>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from 'vue'

const listContainer = ref(null)
const items = reactive([])
const loading = ref(false)
const page = ref(1)
const pageSize = 20

// 模拟数据请求
const fetchData = async () => {
  loading.value = true
  // 实际项目中替换为真实API调用
  const res = await new Promise(resolve => {
    setTimeout(() => {
      resolve(Array(pageSize).fill().map((_, i) => ({
        id: (page.value - 1) * pageSize + i,
        content: `第${page.value}页 - 条目${i+1}`
      })))
    }, 500)
  })
  
  items.push(...res)
  page.value++
  loading.value = false
}

// 滚动监听处理函数
const handleScroll = () => {
  if (loading.value) return
  
  const container = listContainer.value
  const { scrollTop, scrollHeight, clientHeight } = container
  
  // 当滚动到底部100px时加载更多
  if (scrollHeight - scrollTop - clientHeight < 100) {
    fetchData()
  }
}

onMounted(() => {
  fetchData() // 初始加载
  listContainer.value.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  listContainer.value.removeEventListener('scroll', handleScroll)
})
</script>

<style>
.infinite-list {
  height: 500px;
  overflow-y: auto;
}

.list-item {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.loading {
  text-align: center;
  padding: 16px;
  color: #666;
}
</style>

在这个示例中，我们使用了Vue3的ref和reactive创建响应式数据(packages/reactivity/src/ref.ts)，通过onMounted和onUnmounted管理生命周期(packages/runtime-core/src/apiLifecycle.ts)。

性能优化：虚拟列表技术

当列表数据超过1000条时，即使使用无限滚动，大量DOM节点依然会导致性能问题。这时需要引入虚拟列表技术——只渲染可视区域内的DOM节点。

Vue3的v-for指令配合renderList函数(packages/runtime-core/src/renderList.ts)可以实现这一功能。以下是优化后的核心代码：

<div class="virtual-list" ref="listContainer" 
     :style="{ height: `${visibleHeight}px` }">
  <div class="list-wrapper" 
       :style="{ 
         height: `${totalHeight}px`,
         transform: `translateY(${offsetTop}px)`
       }">
    <div v-for="item in visibleItems" :key="item.id" class="list-item">
      {{ item.content }}
    </div>
  </div>
</div>

<script setup>
import { ref, computed, watchEffect } from 'vue'

// 可视区域高度
const visibleHeight = ref(500)
// 每条item高度
const itemHeight = 60
// 总数据
const items = ref([])
// 可见项
const visibleItems = ref([])
// 滚动偏移量
const offsetTop = ref(0)
// 总高度
const totalHeight = computed(() => items.value.length * itemHeight)

// 计算可见区域数据
const updateVisibleItems = () => {
  const container = listContainer.value
  const scrollTop = container.scrollTop
  
  // 可见区域起始索引
  const startIndex = Math.floor(scrollTop / itemHeight)
  // 可见区域结束索引（额外多渲染5项，避免快速滚动时白屏）
  const endIndex = Math.ceil((scrollTop + visibleHeight.value) / itemHeight) + 5
  
  visibleItems.value = items.value.slice(startIndex, endIndex)
  offsetTop.value = startIndex * itemHeight
}

// 监听滚动事件
const handleScroll = () => {
  updateVisibleItems()
}

// 初始加载和数据更新时重新计算可见项
watchEffect(() => {
  if (listContainer.value) {
    updateVisibleItems()
  }
})
</script>

虚拟列表通过动态计算可见区域的起始和结束索引，只渲染当前视口内的项，并通过 translateY 调整偏移量，从而大幅减少DOM节点数量。这种方式充分利用了Vue3的计算属性(packages/reactivity/src/computed.ts)和响应式依赖追踪能力。

高级优化策略

1. 防抖节流处理

滚动事件会频繁触发，使用防抖节流可以减少不必要的计算。Vue3中可以通过watchAPI结合定时器实现：

import { watch } from 'vue'

const scrollPosition = ref(0)

// 节流处理，每100ms更新一次
watch(scrollPosition, (newVal) => {
  // 处理滚动逻辑
}, { flush: 'post', debounce: 100 })

2. 图片懒加载

对于包含图片的列表，使用Vue3的自定义指令(packages/runtime-core/src/directives.ts)实现图片懒加载：

// 注册全局懒加载指令
app.directive('lazy', {
  mounted(el, binding) {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        el.src = binding.value
        observer.unobserve(el)
      }
    })
    observer.observe(el)
  }
})

// 使用
<img v-lazy="item.imageUrl" alt="懒加载图片">

3. 数据缓存与预加载

利用Vue3的EffectScope(packages/reactivity/src/effectScope.ts)管理数据请求的副作用，实现页面离开时取消请求，返回时恢复缓存：

import { effectScope, ref } from 'vue'

const scope = effectScope()
scope.run(() => {
  // 在此作用域内的响应式副作用
  const data = ref(null)
  
  const fetchData = async () => {
    // 请求逻辑
  }
  
  fetchData()
})

// 页面离开时清理
onUnmounted(() => {
  scope.stop()
})

项目资源与扩展阅读

Vue3官方文档：README.md
响应式系统源码：packages/reactivity/src/
组件渲染逻辑：packages/runtime-core/src/component.ts
虚拟DOM实现：packages/runtime-core/src/vnode.ts
示例项目：packages/vue/examples/

通过以上方法，我们可以构建一个既流畅又高效的无限滚动列表。关键在于平衡数据加载与DOM渲染，充分利用Vue3的响应式系统和虚拟DOM特性。在实际项目中，还可以根据需求选择成熟的第三方库，如vue-virtual-scroller，但理解其底层实现原理有助于更好地解决定制化需求。

希望本文能帮助你在Vue3项目中攻克无限滚动的性能难题。如果觉得有用，请点赞收藏，并关注后续关于Vue3性能优化的深入探讨！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考