Vue组合式API中如何在onMounted外访问变量使v-if生效？

核心问题 #

你定义的appear是普通布尔变量，不是Vue的响应式变量。Vue无法追踪普通变量的变化，所以即使滚动时appear的值改变了，模板里的v-if也不会触发视图更新。

修复步骤 #

1. 用Vue的ref创建响应式变量替代普通let声明，ref是组合式API中创建基础类型响应式变量的标准方式。
2. 修改滚动事件中对appear的赋值逻辑，需通过.value访问ref变量的实际值。
3. （可选但推荐）在组件卸载时移除滚动监听，避免内存泄漏。

修改后的完整代码 #

Script部分 #

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { RouterView } from "vue-router";
import Menu from "./components/menu.vue";

// 用ref创建响应式变量，指定类型为boolean
const appear = ref<boolean>(true)

const changeCss = () => {
  const bodyElement = document.querySelector("body");
  const navElement = document.querySelector("nav");
  // 通过.value修改ref变量的值
  appear.value = scrollY <= 500;
  console.log(appear.value);
}

onMounted(() => {
  window.addEventListener("scroll", changeCss, false);
})

// 组件卸载时移除监听
onUnmounted(() => {
  window.removeEventListener("scroll", changeCss, false);
})
</script>

Template部分 #

<template >
  <div class="app">
    <div v-if="appear">
      <Menu></Menu>
    </div>
    <div class="router_view">
      <RouterView />
    </div>
    <div>
      <!-- footer -->
    </div>
  </div>
</template>

说明 #

• ref创建的变量会被Vue追踪变化，当appear.value改变时，模板中的v-if会自动更新视图。
• 把changeCss函数提到onMounted外部，方便在onUnmounted中引用以移除监听。
• 简化赋值逻辑为appear.value = scrollY <= 500，和原三元表达式效果一致但更简洁。

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