如何在Nuxt 2中实现HTML元素的懒渲染？

针对你遇到的5000条数据导致DOM过多的问题，推荐使用虚拟滚动方案，只渲染当前视口内的元素，完全匹配你的需求。以下是适配Nuxt 2.15.8 + Vue 2.7.10的具体实现步骤：

1. 安装适配Vue2的虚拟滚动库 #

使用vue-virtual-scroller的Vue2兼容版本：

npm install vue-virtual-scroller@1.0.1
# 或 yarn add vue-virtual-scroller@1.0.1

2. 在Nuxt中配置插件 #

在项目根目录的plugins文件夹下新建vue-virtual-scroller.js文件，内容如下：

import Vue from 'vue'
import { VirtualScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

Vue.component('VirtualScroller', VirtualScroller)

接着在nuxt.config.js中注册该插件：

export default {
  plugins: [
    '~/plugins/vue-virtual-scroller.js'
  ]
}

3. 修改页面代码替换v-for为虚拟滚动组件 #

将原有的v-for循环替换为VirtualScroller组件，同时指定列表项的预估高度（保证滚动计算精准）：

<template>
  <div>
    <h1>Page Photos</h1>
    <div v-if="photos.length > 0">
      <!-- 虚拟滚动组件：仅渲染视口内的元素 -->
      <VirtualScroller
        :items="photos"
        :item-height="650" <!-- 预估每个照片项的总高度（标题+图片+间距） -->
        key-field="id"
      >
        <template v-slot="{ item, index }">
          <!-- 单个照片元素，仅在进入视口时渲染 -->
          <div>
            <h5>{{ `${index + 1}. ${item.title}` }}</h5> 
            <img
              :alt="item.title"
              :src="item.url"
              width="600"
              height="600"
            />
            <br />
          </div>
        </template>
      </VirtualScroller>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData(context) {
    try {
      const response = await fetch(context.$constants.photosApi).then((r) =>
        r.json()
      );
      return {
        photos: response || [],
      };
    } catch (error) {
      console.log("error", error);
      return {
        photos: [],
      };
    }
  },
};
</script>

关键说明 #

• item-height：需要根据你实际的元素高度设置接近的数值，如果列表项高度不固定，可以添加variable-height属性（但性能略低于固定高度配置）。
• 虚拟滚动的核心逻辑：无论总数据量多大，始终只渲染当前视口能容纳的元素，滚动时动态替换内容，大幅减少DOM节点数量，提升页面加载和滚动性能。
• 若不想依赖第三方库，也可基于Intersection Observer API手动实现元素懒渲染，但需要自行管理已渲染/未渲染的元素列表，复杂度较高，新手更推荐使用成熟的虚拟滚动库。

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