如何访问“onMounted”生命周期挂钩内的变量

Question

我正在尝试使用 ScrollY 属性有条件地渲染我的应用程序中的主菜单。

changeCss 函数正在工作，当滚动超过 500px 时，我从控制台日志中得到“true”和“false”，但 v-if 不起作用。

有没有办法可以在 onMounted() 函数之外访问此出现变量以使 v-if 工作？我无法访问“this”，因为我正在使用组合 API 和

这是我的脚本：

<script setup lang="ts">

import { onMounted, ref } from 'vue';
import { RouterView } from "vue-router";
import Menu from "./components/menu.vue";

let appear: Boolean = true

onMounted(() => {

  function changeCss() {
    var bodyElement = document.querySelector("body");
    var navElement = document.querySelector("nav");
    scrollY > 500 ? appear = false : appear = true;
    scrollY > 500 ? console.log(appear) : console.log(appear);
  }
  window.addEventListener("scroll", changeCss, false);
})

</script>

这是我的模板：

<template >
  <div class="app">

    <div v-if="appear">
      <Menu></Menu>
    </div>

    <div class="router_view">
      <RouterView />
    </div>

    <div>
      <!-- footer -->
    </div>

  </div>
</template>

Answer 1

您必须使用 ref() 使“出现”变量“反应”（这意味着模板应该对变量更改进行“反应”）

缺点是您必须通过“.value”属性读取/写入变量。

类似这样的事情

<script setup lang="ts">
....
let appear = ref(true);
....
onMounted(() => {

  function changeCss() {
....
     apppear.value = false;
....    
  }
  window.addEventListener("scroll", changeCss, false);
})

</script>