vue3 晚点加载html

Vue3 提供了一种称为“懒加载”（Lazy Loading）的技术，用于延迟加载非首屏需要展示的 HTML 内容，通常是在用户滚动到某个元素附近时才动态加载。这可以显著提升页面的初始加载速度，特别是对于内容较多或者包含大图片、视频等资源的页面。

在 Vue 中，你可以利用 `v-if` 或者 `v-show` 结合 Intersection Observer API 来实现懒加载。例如，可以创建一个包含组件的 `<div>` 元素，并将其 `v-if` 设置为一个观察器：

<div v-if="isContentLoaded">
  <your-component :data="lazyData" />
</div>

<script>
export default {
  data() {
    return {
      isContentLoaded: false,
      lazyData: null,
    };
  },
  mounted() {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          this.isContentLoaded = true;
          // 当元素进入视窗时，从服务器或缓存中获取数据并赋值给 lazyData
          fetch('/your-data-url')
            .then((response) => response.json())
            .then((data) => (this.lazyData = data));
          // 关闭观察器，防止多次触发
          observer.unobserve(entries[0].target);
        }
      },
      { threshold: 0.5 } // 可调整阈值，比如0.5表示50%以上可视区域
    );
    observer.observe(this.$el); // 观察元素
  },
};
</script>

在这个例子中，只有当元素进入浏览器视口的50%以上时，才会开始请求数据。