vue中用JavaScript写懒加载

懒加载（也称为延迟加载）是一种优化技术，可以提高页面性能和用户体验。在 Vue 中使用 JavaScript 实现懒加载可以通过以下步骤实现：

1. 在需要延迟加载的元素上添加一个占位符，比如一个空的 `<div>` 元素。

2. 使用 `IntersectionObserver` API 监听占位符元素是否进入用户的视口，如果进入视口则触发加载操作。

3. 在加载操作中，将占位符元素替换为实际的元素，比如加载图片或其他资源。

下面是一个简单的示例代码：

<template>
  <div>
    <div class="placeholder" ref="placeholder"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 创建 IntersectionObserver 实例
    const observer = new IntersectionObserver((entries) => {
      // 如果占位符元素进入视口，则加载实际元素
      if (entries[0].isIntersecting) {
        this.loadImage();
        // 停止监听
        observer.disconnect();
      }
    });
    // 监听占位符元素
    observer.observe(this.$refs.placeholder);
  },
  methods: {
    loadImage() {
      // 加载图片
      const img = new Image();
      img.src = "https://example.com/image.jpg";
      img.onload = () => {
        // 替换占位符元素
        this.$refs.placeholder.replaceWith(img);
      };
    },
  },
};
</script>

<style>
.placeholder {
  height: 500px; /* 占位符元素的高度 */
}
</style>

在这个示例中，我们创建了一个 `IntersectionObserver` 实例来监听占位符元素是否进入视口。如果进入视口，则调用 `loadImage` 方法加载图片，并将占位符元素替换为实际的图片元素。注意，我们在加载完成后使用 `replaceWith` 方法替换元素，这样可以保证替换后的元素与占位符元素在 DOM 结构中的位置相同，避免了页面跳动的问题。