IntersectionObserver在vue2中使用

Intersection Observer (IO) 是一种现代浏览器提供的API，用于监测 DOM 节点是否可见或者部分进入视野范围。在 Vue2 中，我们可以利用它的 `Intersection Observer API` 实现动态的懒加载、图片预加载优化等场景。

以下是使用 `Intersection Observer` 的基本步骤：

1. 安装依赖：Vue 自带的 `Vue.nextTick()` 已经足够处理异步操作，所以通常不需要额外安装库。但在某些情况下，如使用第三方库，你可能需要引入 `vue-infinite-loading` 这样的工具包。

2. 创建 Intersection Observer 实例：在组件的 mounted 或者 watch 监听器中，创建一个 Intersection Observer 实例并传入回调函数。这里需要提供要观察的元素和配置选项（如阈值、等待时间等）。

import { useIntersectionObserver } from 'vue-infinite-loading';

export default {
  setup() {
    const ref = ref(null); // 使用 ref 来引用可视区元素

    // 使用 Intersection Observer
    const { observe, unobserve } = useIntersectionObserver(ref.value, {
      rootMargin: '0px', // 观察节点相对于根节点的距离
      threshold: 0.5, // 当元素进入视野的百分比
    });

    // 观察到变化时执行回调
    observe((entry) => {
      if (entry.isIntersecting) {
        // 可见时执行的操作，例如加载更多数据
      }
    });

    // 移除观察
    beforeDestroy(() => {
      unobserve();
    });

    return { ref };
  },
}