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

== 优化方案 ==

=== 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>