最近开发中遇到一个问题，页面中有一个上拉加载下拉刷新的列表，列表中每条数据都有一个ehcarts的折线，当列表数据多的话echarts也会随着增加，必然会造成性能消耗，于是想到了采用这个技术，

话不多说直接贴代码：

1. 创建自定义指令

首先，创建一个自定义指令来封装 Intersection Observer 的逻辑。这样你可以在多个组件中复用这段代码。

// src/directives/intersect.js
export default {
  mounted(el, binding) {
    const options = {
      root: null,
      rootMargin: '0px',
      threshold: 0.1, // 触发回调的阈值（0-1之间）
    };

    const callback = (entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 元素进入可视区
          binding.value(true, entry);
        } else {
          // 元素离开可视区
          binding.value(false, entry);
        }
      });
    };

    const observer = new IntersectionObserver(callback, options);
    observer.observe(el);

    el._observer = observer;
  },
  unmounted(el) {
    if (el._observer) {
      el._observer.disconnect();
      delete el._observer;
    }
  },
};

2. 注册自定义指令

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import intersect from '@/directives/intersect';

const app = createApp(App);
app.directive('intersect', intersect);
app.mount('#app');

3. 在 Vue 组件中使用自定义指令

<template>
  <div v-intersect="handleIntersect" class="observed-element">
    观察的元素
  </div>
</template>

<script>
import intersect from '@/directives/intersect';

export default {
  directives: {
    intersect,
  },
  methods: {
    handleIntersect(isIntersecting, entry) {
      if (isIntersecting) {
        console.log('元素进入可视区', entry);
      } else {
        console.log('元素离开可视区', entry);
      }
    },
  },
};
</script>

<style scoped>
.observed-element {
  height: 100px;
  background-color: lightblue;
  margin-bottom: 200vh; /* 确保元素初始状态在视口外 */
}
</style>

1. 自定义指令：intersect 是一个 Vue 自定义指令，用于在元素挂载到 DOM 上时创建一个 Intersection Observer，并在元素被卸载时断开观察。
2. 回调函数：在 intersect 指令的回调函数中，当元素进入或离开可视区时，会触发回调并传递 isIntersecting 状态和 entry 对象。
3. 组件使用：在组件中，通过 v-intersect="handleIntersect" 使用这个指令，并在 handleIntersect 方法中处理元素进入和离开可视区的逻辑。

这样你就可以在 Vue 3 组件中判断元素是否在可视区内以及何时离开可视区了