编辑“︁Vue.js长列表优化”︁（章节）

= Vue.js长列表优化 =

== 介绍 ==
在Vue.js应用中，当处理包含大量数据项（如数千或数万条记录）的列表时，直接渲染所有DOM元素会导致严重的性能问题，包括页面卡顿、内存占用过高和响应延迟。'''Vue.js长列表优化'''是一组技术手段，旨在通过减少DOM节点数量、优化渲染机制和内存管理来提升大型数据集的展示效率。

== 核心问题 ==
传统列表渲染（如<code>v-for</code>）会为每个数据项创建对应的DOM节点。当数据量极大时：
* 初始渲染时间线性增长
* 滚动操作触发频繁的重排（Reflow）和重绘（Repaint）
* 内存占用可能超过浏览器限制

== 优化方案 ==

=== 1. 虚拟滚动（Virtual Scrolling） ===
'''原理'''：仅渲染可视区域内的列表项，动态替换内容而非创建全部DOM节点。

==== 实现示例 ====
使用[vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller)库：
<syntaxhighlight lang="javascript">
<template>
  <RecycleScroller
    class="scroller"
    :items="largeList"
    :item-size="50"
    key-field="id"
  >
    <template #default="{ item }">
      <div class="item">{{ item.text }}</div>
    </template>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'

export default {
  components: { RecycleScroller },
  data() {
    return {
      largeList: Array(10000).fill().map((_, i) => ({
        id: i,
        text: `Item ${i}`
      }))
    }
  }
}
</script>

<style>
.scroller {
  height: 400px;
}
.item {
  height: 50px;
  padding: 10px;
}
</style>
</syntaxhighlight>

'''效果对比'''：
{| class="wikitable"
|-
! 方案 !! 10,000项DOM节点数 !! 内存占用
|-
| 传统<code>v-for</code> || 10,000 || ~150MB
|-
| 虚拟滚动 || 20-30（视窗口高度） || ~30MB
|}

=== 2. 分页加载（Pagination） ===
适用于允许分步加载的场景，通过API分批请求数据。

<syntaxhighlight lang="javascript">
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 50,
      items: []
    }
  },
  methods: {
    async loadPage() {
      const res = await fetch(`/api/items?page=${this.currentPage}&size=${this.pageSize}`)
      this.items = [...this.items, ...await res.json()]
    }
  },
  mounted() {
    this.loadPage()
  }
}
</syntaxhighlight>

=== 3. 惰性渲染（Lazy Rendering） ===
结合Intersection Observer API实现滚动到视口时再渲染。

<syntaxhighlight lang="javascript">
<template>
  <div v-for="item in visibleItems" :key="item.id">
    {{ item.content }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      allItems: [...],
      visibleItems: []
    }
  },
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const itemId = entry.target.dataset.id
          this.visibleItems.push(this.allItems.find(item => item.id === itemId))
        }
      })
    })

    // 为占位元素添加观察器
    document.querySelectorAll('.placeholder').forEach(el => observer.observe(el))
  }
}
</script>
</syntaxhighlight>

== 性能对比分析 ==
<mermaid>
barChart
    title 不同方案性能对比
    x-axis 方案
    y-axis 时间(ms)
    series 初始渲染
    series 滚动响应
    series 内存占用(MB)
    Traditional: 1200, 200, 150
    Virtual: 80, 30, 30
    Pagination: 100, 50, 50
    Lazy: 200, 80, 40
</mermaid>

== 进阶技巧 ==
* '''Object.freeze()'''：冻结不需要响应式的超大数组
  <syntaxhighlight lang="javascript">
  this.largeList = Object.freeze(apiResponse.data)
  </syntaxhighlight>

* '''减少响应式数据'''：对纯展示数据使用<code>Object.create(null)</code>
* '''Web Worker预处理'''：将数据排序/过滤操作移至Worker线程

== 实际案例 ==
'''电商平台商品列表'''：
1. 初始加载首屏50项（分页）
2. 滚动时使用虚拟滚动加载后续项
3. 价格筛选时冻结非可视区域数据
4. 结合<code>keep-alive</code>缓存已渲染项

== 数学原理 ==
虚拟滚动的性能提升可通过DOM复杂度公式解释：
<math>
O(n) \rightarrow O(\frac{h}{s} + b)
</math>
其中：
* <math>h</math> = 容器高度
* <math>s</math> = 单项高度
* <math>b</math> = 缓冲区大小（通常2-3）

== 总结 ==
{| class="wikitable"
|-
! 场景 !! 推荐方案
|-
| 完整数据集必须展示 || 虚拟滚动
|-
| 允许分批加载 || 分页+无限滚动
|-
| 非连续访问长列表 || 惰性渲染
|}

通过合理选择优化策略，可使Vue.js处理百万级数据列表时仍保持60fps的流畅体验。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js性能优化]]