Vue3这一个弹幕从下往上显示数据的页面，需要用到虚拟化技术，不然数据多了，页面会卡顿，用css3技术，让弹幕显示出来很丝滑

确实，如果弹幕数据量很大，直接渲染到页面上可能会导致页面卡顿，影响用户体验。因此，可以考虑使用虚拟化技术来优化弹幕组件。

Vue3提供了一个`<teleport>`组件，可以将一个组件的内容插入到DOM中的任意位置。我们可以使用`<teleport>`组件将弹幕放到一个独立的组件中，然后使用虚拟化技术来优化弹幕的渲染和显示。

下面是一个使用Vue3和CSS3实现弹幕从下往上显示的页面，并使用虚拟化技术优化性能的示例代码：

<template>
  <div class="danmu-container">
    <teleport to="#danmu-layer">
      <div class="danmu-box" v-for="(danmu, index) in visibleList" :key="danmu.id" :style="{ bottom: (index * lineHeight) + 'px', animationDelay: (index * 0.2) + 's' }">{{ danmu.text }}</div>
    </teleport>
  </div>

  <div id="danmu-layer"></div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  name: 'Danmu',

  props: {
    danmuList: {
      type: Array,
      default: () => []
    }
  },

  setup(props) {
    const lineHeight = 60; // 弹幕行高
    const danmuHeight =