Javascript Vue.js中的querySelector问题

我对

querySelector

有过一次奇怪的体验

文件结构：

App.vue
views/
--Login.vue
component/
--Canvas.vue
--Navigation.vue

现在，在我的画布中，我有了p5.js设置，其中有一些效果作为背景（z-index:-100；）。我将其设置为用户有一个自定义光标。悬停时，p5椭圆的中心应该改变颜色，除了在Login.vue页面上，它也会改变颜色。Navigation.vue中的所有按钮都工作正常。我尝试了

querySelector

，

vue refs

和

getElementById

。对于我的Navigation.vue，我有以下几点：

const nav = document.querySelector('#hover');
if (nav) {
    nav.addEventListener('mouseenter', () => {
        isHovered = true;
    });
    nav.addEventListener('mouseout', () => {
        isHovered = false;
    });
}

在我的App.vue中，我的设置如下：

<template>
    <div id="app">
        <Navigation />
        <router-view />
        <Canvas />
    </div>
</template>

并在Chrome中渲染如下：

<template>
    <div id="app">
        <Navigation />
        <router-view />
        <Canvas />
    </div>
</template>

（.nav是my Navigation.vue |。main是my Login.vue |。p5Canvas是my Canvas.vue）

当我使用console.log（）一个我想要悬停效果的按钮时，它返回

undefined

。我想要的只是与我的Navigation.vue中相同的悬停效果。你知道为什么这样不行吗

---

奇怪的是，如果我在页面加载后编辑并添加一个console.log（），它会给我一个按钮的节点列表。那么，有没有一种方法可以检测按钮何时渲染，或者$refs的全局调用？提前感谢

您应该在mounted（）钩子中查询选择器，以确保DOM已装载

然而，如果只是

<div class="nav" @mouseenter="isHovered = true" @mouseleave="isHovered = false">