Vue2项目：全局滚动监听VS组件独立滚动监听哪个更优？

嘿，这个问题我太有共鸣了——多个组件各自挂载滚动监听确实会有点冗余，而且理论上全局只需要一个监听就够了对吧？既想保留组件的独立性，又要解决性能顾虑，我给你分享几个实用的思路：

方案一：全局滚动监听 + 事件总线（Event Bus） #

核心思路是只在全局加一次滚动监听，然后通过事件总线把滚动事件的信息分发给需要的组件，组件只负责订阅事件和处理自身的显示逻辑：

1. 先在main.js里创建一个事件总线，并添加全局滚动监听：

// main.js
Vue.prototype.$scrollBus = new Vue();

// 全局滚动监听，只执行一次
let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      // 触发事件总线，传递滚动位置
      Vue.prototype.$scrollBus.$emit('scroll', window.scrollY);
      ticking = false;
    });
    ticking = true;
  }
});

这里用requestAnimationFrame是为了节流，避免滚动时触发过多回调，优化性能。

2. 组件里只需要订阅事件，处理自身的显示逻辑：

<template>
  <div ref="targetElement" class="hidden-element"></div>
</template>

<script>
export default {
  created() {
    this.$scrollBus.$on('scroll', this.checkIfShow);
  },
  beforeDestroy() {
    this.$scrollBus.$off('scroll', this.checkIfShow);
  },
  methods: {
    checkIfShow(scrollY) {
      const element = this.$refs.targetElement;
      if (!element) return;
      const rect = element.getBoundingClientRect();
      // 判断元素是否进入视口
      if (rect.top <= window.innerHeight && rect.bottom >= 0) {
        element.classList.add('show');
        // 显示后取消订阅，避免不必要的计算
        this.$scrollBus.$off('scroll', this.checkIfShow);
      }
    }
  }
};
</script>

这样每个组件还是独立的，不需要关心全局监听的实现，同时全局只有一个滚动监听，性能更优。

方案二：封装自定义指令（v-scroll-reveal） #

把滚动显示的逻辑封装成Vue自定义指令，全局注册后，组件只需要给目标元素加指令即可，所有监听逻辑由指令统一管理：

1. 在main.js里注册全局指令：

// main.js
Vue.directive('scroll-reveal', {
  inserted(el, binding) {
    const checkVisibility = () => {
      const rect = el.getBoundingClientRect();
      if (rect.top <= window.innerHeight && rect.bottom >= 0) {
        // 执行显示逻辑，比如添加类名
        el.classList.add('show');
        // 显示后移除监听
        window.removeEventListener('scroll', checkVisibility);
      }
    };

    // 初始化先检查一次
    checkVisibility();
    // 添加监听（这里可以统一做节流优化）
    window.addEventListener('scroll', checkVisibility);
    // 把监听函数存到元素上，方便销毁时移除
    el._scrollListener = checkVisibility;
  },
  unbind(el) {
    // 组件销毁时移除监听
    window.removeEventListener('scroll', el._scrollListener);
  }
});

这里可以把节流逻辑也封装到指令里，比如和方案一一样用requestAnimationFrame做节流。

2. 组件里直接使用指令：

<template>
  <div v-scroll-reveal class="hidden-element"></div>
</template>

这种方式组件代码更简洁，完全不用关心监听逻辑，而且指令可以统一处理所有元素的滚动检测，也能做到全局监听的优化（比如把所有需要检测的元素存在一个数组里，全局滚动时批量检测，而不是每个元素加单独监听）。

方案三：使用Intersection Observer API（推荐） #

这是浏览器原生提供的API，专门用来监听元素是否进入视口，性能比scroll监听好很多（因为是浏览器底层优化，不会在滚动时频繁触发回调），而且代码更简洁，完全不需要自己处理scroll事件：

1. 封装一个工具函数或者组件，比如封装成指令：

// main.js
Vue.directive('scroll-reveal', {
  inserted(el) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          el.classList.add('show');
          // 显示后停止监听该元素
          observer.unobserve(el);
        }
      });
    }, {
      // 可以配置阈值，比如元素进入视口10%时触发
      threshold: 0.1
    });

    observer.observe(el);
    // 把observer存到元素上，销毁时取消监听
    el._observer = observer;
  },
  unbind(el) {
    el._observer.disconnect();
  }
});

2. 组件里同样直接用指令：

<template>
  <div v-scroll-reveal class="hidden-element"></div>
</template>

这个方案的优势是性能最优，代码最简洁，而且不需要自己处理节流、滚动位置计算这些细节，浏览器会帮我们搞定。唯一需要注意的是兼容性，但Vue 2的目标浏览器一般都支持Intersection Observer（如果要兼容IE，可以加polyfill）。

总结 #

• 如果要兼容老浏览器，方案一或方案二更合适；
• 如果追求性能和简洁性，优先选方案三（Intersection Observer）；
• 三种方案都能保留组件的独立性，同时解决多个滚动监听的性能问题。

内容的提问来源于stack exchange，提问作者Sandwell