虚拟表格和懒加载有什么区别

虚拟表格和懒加载都是前端优化技术，用于提高大量数据渲染的效率和性能。

虚拟表格是一种通过只渲染可视区域内的数据而不是所有数据来提高渲染性能的方法。它可以大大减少需要加载的DOM元素数量，从而提高了渲染速度和响应时间。当用户滚动页面时，虚拟表格会自动加载新的数据以确保可视区域内的数据始终处于最新状态。这种技术通常用于处理庞大的数据集，如数千行的表格或列表。

懒加载是一种在需要时动态加载数据的技术。它允许页面在加载时只加载必要的数据，而不是所有内容。当用户向下滚动页面时，更多的数据将动态加载以确保用户能够浏览整个页面。这种技术通常用于处理包含大量图片或视频的网站，以加速页面加载速度和减少带宽消耗。

以下是示例代码：

虚拟表格：

<div class="table">
  <div v-for="(item, index) in visibleData" :key="index">{{ item }}</div>
</div>

data() {
  return {
    data: [/*长数组*/],
    visibleData: []
  }
},
computed: {
  tableHeight() {
    return this.$refs.table.clientHeight;
  },
  itemHeight() {
    return this.$refs.table.children[0].clientHeight;
  },
  visibleCount() {
    return Math.ceil(this.tableHeight / this.itemHeight) + 1;
  }
},
mounted() {
  this.updateVisibleData();
},
methods: {
  updateVisibleData() {
    this.visibleData = this.data.slice(0, this.visibleCount);
  },
  handleScroll() {
    const scrollTop = this.$refs.table.scrollTop;
    const start = Math.floor(scrollTop / this.itemHeight);
    this.visibleData = this.data.slice(start, start + this.visibleCount);
  }
},

懒加载：

<div class="gallery">
  <div v-for="(image, index) in images" :key="index">
    <img v-if="image.loaded" :src="image.url" />
    <div v-else>
      <div class="placeholder"></div>
    </div>
  </div>
</div>

data() {
  return {
    images: [
      { url: 'url1.jpg', loaded: false },
      { url: 'url2.jpg', loaded: false },
      { url: 'url3.jpg', loaded: false },
      // more images...
    ]
  }
},
mounted() {
  this.lazyLoad();
  window.addEventListener('scroll', this.lazyLoad);
},
beforeDestroy() {
  window.removeEventListener('scroll', this.lazyLoad);
},
methods: {
  lazyLoad() {
    const windowHeight = document.documentElement.clientHeight;
    this.images.forEach(image => {
      if (!image.loaded) {
        const rect = image.el.getBoundingClientRect();
        if (rect.top < windowHeight) {
          image.loaded = true;
          const img = new Image();
          img.src = image.url;
          img.onload = () => {
            image.el.children[0].src = image.url;
          }
        }
      }
    });
  }
}