如何向IntersectionObserver传递额外参数？Vue懒加载插件开发疑问

我来帮你搞定这个问题！你需要把指令的binding参数和元素关联起来，这样IntersectionObserver的回调就能拿到对应的自定义函数了。核心思路是用一个容器存储元素与它对应的binding信息，在回调里通过元素反向查找对应的函数并执行。

修改后的完整代码 #

const lazyload = {
  install(Vue) {
    // 用WeakMap存储元素与对应binding的关联，避免内存泄漏
    const elementBindingMap = new WeakMap();

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.intersectionRatio > 0) {
          // 通过当前元素从Map中取出对应的binding
          const binding = elementBindingMap.get(entry.target);
          // 确保绑定的是函数再执行
          if (binding && typeof binding.value === 'function') {
            binding.value();
            // 元素进入视口后停止观察，避免重复触发
            observer.unobserve(entry.target);
            // 从Map中移除，释放资源
            elementBindingMap.delete(entry.target);
          }
        }
      });
    });

    Vue.directive('lazy', {
      // 接收binding作为第二个参数
      inserted(element, binding) {
        // 将元素和它的binding存入Map
        elementBindingMap.set(element, binding);
        observer.observe(element);
      },
      // 可选：元素销毁时清理资源
      unbind(element) {
        observer.unobserve(element);
        elementBindingMap.delete(element);
      }
    });
  }
};

关键细节说明 #

1. 用WeakMap存储关联关系：WeakMap的键是元素对象，当元素被销毁时，对应的条目会自动被垃圾回收，不会造成内存泄漏，非常适合这种场景。
2. 在inserted钩子中绑定元素与binding：每当元素被插入DOM时，把它和对应的binding存入WeakMap，再开始监听。
3. 回调中执行自定义函数：当元素进入视口时，通过entry.target拿到元素，从WeakMap中取出对应的binding，执行binding.value（也就是你绑定的fire函数）。
4. 清理资源：执行完函数后停止观察该元素，并从WeakMap中删除条目，避免重复触发和无用内存占用。

使用示例 #

现在你可以像预期的那样使用指令了：

<template>
  <div class="col-sm-6" v-lazy="fire"></div>
</template>

<script>
export default {
  methods: {
    fire() {
      console.log('元素进入视口啦！自定义函数触发～');
      // 这里可以写你自己的业务逻辑，比如加载资源、发送埋点等
    }
  }
};
</script>

内容的提问来源于stack exchange，提问作者Stephan-v