Vue无限列表是Vue框架的一种高效数据渲染方式，适用于需要快速渲染大量数据的列表场景。与传统列表渲染方式不同，Vue无限列表只渲染当前页面上可见的部分列表项，随着滚动条的滑动，动态地加载下一页的数据，从而实现无限列表的效果。

下面是一个简单的Vue无限列表示例，其中使用了v-for指令和computed计算属性来实现动态加载数据、缓存可见列表项、计算滚动条位置等功能。

  <template>
    <div class="list-container" 
      @scroll="handleScroll">
      <ul>
        <li v-for="(item, index) in visibleListItems" 
          :key="index">{{ item }}</li>
      </ul>
    </div>
  </template>

  <script>
    export default {
      data() {
        return {
          listData: [1, 2, 3, ... , 1000], // 初始数据
          visibleStartIndex: 0, // 可见列表项的起始索引
          visibleCount: 20, // 可见列表项的数量
          itemHeight: 50 // 单个列表项的高度
        }
      },
      computed: {
        visibleEndIndex() {
          // 计算可见列表项的结束索引
          return this.visibleStartIndex + this.visibleCount
        },
        visibleListItems() {
          // 缓存可见的列表项数据
          return this.listData.slice(this.visibleStartIndex, this.visibleEndIndex)
        },
        containerHeight() {
          // 计算列表容器的高度
          return this.visibleCount * this.itemHeight + "px"
        }
      },
      methods: {
        handleScroll(event) {
          // 监听滚动条滚动事件
          const scrollTop = event.target.scrollTop
          this.visibleStartIndex = Math.floor(scrollTop / this.itemHeight)
        }
      }
    }
  </script>

  <style>
    .list-container {
      height: 100%;
      overflow-y: scroll;
    }
    ul {
      margin: 0;
      padding: 0;
    }
    li {
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
  </style>

可以看到，通过使用Vue无限列表，不仅可以提高页面渲染速度，减少页面卡顿，还可以节省性能开销、减少内存占用，提升用户体验。