VueUse useElementVisibility监听失效问题求助

你的问题核心是监听对象错误：

• 你当前监听的是me（DOM元素的ref），这个ref仅在组件挂载时从null变为实际DOM元素时触发一次回调，后续滚动时元素引用本身不会发生变化，所以watcher不会再触发。
• 初始显示组件可见是正常现象（刚挂载时元素确实处于视口内），但滚动时你没有监听正确的状态变量。

正确的做法是监听useElementVisibility返回的isVisible响应式变量，它会实时反映元素的可见状态：

修正后的代码：

<script setup>
import { watch, ref } from "vue";
import { useElementVisibility } from "@vueuse/core";

defineProps({
  msg: {
    type: String,
    required: true,
  },
});

const me = ref(null);
const isVisible = useElementVisibility(me);
// 监听isVisible而非元素引用me
watch(isVisible, (newValue) => {
  console.log("visibilityUpdated", newValue ? "可见" : "不可见");
});
</script>

<template>
  <div ref="me" class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
    </h3>
    <!-- 可直接在模板显示状态，方便调试 -->
    <p>当前可见状态：{{ isVisible ? '可见' : '不可见' }}</p>
  </div>
</template>

补充说明：

• useElementVisibility内部已经封装了对元素可见性变化的监听逻辑，返回的isVisible是响应式变量，只要元素的可见状态改变，它就会自动更新。
• 无需监听DOM元素引用，直接监听这个状态变量就能实现滚动时的状态响应。

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