vue中如何监听窗口变化

在Vue.js中，如果你想监听浏览器窗口的变化（如滚动、大小调整等），你可以使用`IntersectionObserver API`配合事件系统。`Intersection Observer`是一个现代浏览器API，用于观察目标元素是否进入视口。

首先，在组件的实例中创建一个`IntersectionObserver`实例：

import { ref } from 'vue';

export default {
  setup() {
    const isIntersectingRef = ref(false); // 监听结果的ref

    const observeIntersection = (el) => {
      const observer = new IntersectionObserver((entries) => {
        isIntersectingRef.value = entries.isIntersecting;
        // 根据需要执行的函数或更新状态
      }, {
        rootMargin: '0px', // 视口边缘外的距离，可根据需求自定
        threshold: [0.5], // 隐式可视部分阈值，范围是0到1，0表示完全不可见，1表示完全可见
      });

      if (el) {
        observer.observe(el);
      }

      return () => {
        // 当组件卸载时取消观察
        observer.unobserve(el);
      };
    };

    onMounted(() => {
      observeIntersection(document.documentElement); // 观察整个窗口
      // 或者，针对某个Vue组件内的元素
      // observeIntersection(this.$refs.myElement);
    });

    onUnmounted(() => {
      // 取消所有观察
      observeIntersection(null);
    });

    return {
      isIntersecting: isIntersectingRef,
    };
  },
};

在上述代码中，`onMounted`钩子会在组件挂载时开始观察，`onUnmounted`则在组件卸载时停止观察，以避免资源泄漏。