大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Vue-Infinity

Vue-Infinity 是一个模块化工具包，旨在帮助开发者使用 Vue 构建高性能、内存高效且富媒体的应用程序。通过利用智能数据获取和虚拟化渲染，即使在处理大型数据集时也能确保流畅的用户体验。

Vue-Infinity 运用与 3D 引擎相同的原理，大幅提升 UI 的效率，即不可见的内容不会被渲染。这使得应用能够处理数百或数千个元素，而不会造成内存膨胀、卡顿或电池耗尽。无论是构建无限的动态、轮播、媒体库还是仪表盘，Vue-Infinity 都能让应用保持快速、流畅和高效。

Vue-Infinity 的主要功能包括：

• 通过 Ghost 组件有条件地渲染其插槽内容来优化性能。当内容离开屏幕时，其会被尺寸相同的占位符替换，从而 “卸载” 较重的元素（例如：视频），同时保留布局。
• 高性能：卸载屏幕外的内容以释放资源
• 布局稳定性：用大小合适的占位符替换隐藏的内容
• 事件驱动：当组件内容变为可见或隐藏时触发事件：on-load：当组件内容变为可见并渲染时触发before-unload：在组件内容开始隐藏的同一 tick 内触发on-unload：在组件内容隐藏并被占位符替换后的下一个 tick 内触发

目前 Vue-Infinity 在 Github 通过 MIT 协议开源，是一个值得关注的前端开源项目。

如何使用 Vue-Infinity

使用 InfiniteCarousel

一款通用虚拟滚动组件，针对网格或轮播布局进行了优化，可直接与 InfiniteList 集成，用于管理数据访问，并支持以下特性：

• 可自定义行数和列数
• 可配置为水平或垂直滚动条
• 支持每个项目自定义模板
• 支持自定义加载模板
• 允许使用基于 CSS 的滚动捕捉功能滚动到任何项目
• 通过提供 onGetItemAspectRatio 回调函数来支持动态调整项目大小。

<template>
  <InfiniteCarousel
    :infinite-list="infiniteList"
    :height="'50vh'"
    :width="'100%'"
    :numColsToShow="3"
    :numRowsToShow="2"
  >
    <template #item="{ item, index}">
      <img :src="item.url" :alt="item.title" class="carousel-img"/>
    </template>
  </InfiniteCarousel>
</template>

<script setup>
import {useInfiniteList} from 'vue-infinity';

const infiniteList = useInfiniteList({
  fetchItems: (page) => fetchPage(page),
  itemsPerPage: 20,
  maxPagesToCache: 5
});
</script>

使用 v-ghost 指令

v-ghost 指令提供了一种轻量、灵活的 Ghost 组件替代方案，用于优化性能。通过将 v-ghost 应用于任何元素，开发者可以确保其内容仅在进入视口时渲染。当元素离开屏幕时，其内容将被占位符替换，从而保持布局完整性并释放系统资源。

<template>
  <video controls muted playsinline v-ghost>
    <source src="your-video.mp4" type="video/mp4" />
  </video>
</template>

AutoObserver

增强了原生 IntersectionObserver 的功能，自动处理新增元素并清理已移除元素，核心特征包括：

• 观察新增元素
• 停止观察已移除元素
• 允许使用自定义逻辑过滤要观察的元素
• 组件卸载时自动清理

const containerRef = ref<HTMLElement>();

const {disconnect} = useAutoObserver(
  containerRef,
  (entries) => {
    entries.forEach(entry => {
      console.log('Element visibility changed:', entry.isIntersecting);
    });
  },
  {
    rootMargin: '200px',
    threshold: 0.1,
    filter: el => el.classList.contains('observe-me')
  }
);

参考资料

https://github.com/isaact/vue-infinity?tab=readme-ov-file#vue-infinity

https://tewolde.co/vueInfinity/