当我的鼠标光标进入和离开我的 VueJS 组件时，会分别调用以下方法。
当光标进入和离开我的组件时调用的方法：
// located in "methods" section of my Vue component file
onMouseEnter() {
window.Event.$emit("mouse-entered", this.index);
console.log("Mouse entered");
},
onMouseLeave() {
window.Event.$emit("mouse-left", this.index);
console.log("Mouse left");
},
预期，当我的光标进入和离开组件时，我的控制台看起来像这样（每次都发出一个事件）：
然而，真正奇怪的是，在 Vue 开发工具中，每次我的光标进入和离开我的组件时都会发出重复的事件：
鉴于这些相互矛盾的信息，我不确定该相信什么。刷新页面有时会消除开发工具中的重复事件，但我总是在我的控制台中获得单个、独特的事件，这是我想要的行为。
有谁知道这里发生了什么，我应该接受什么作为真相的来源？
下面是在 main.js 文件中声明和初始化 Vue 实例的方式：
// As far as I can tell, duplicated Vue instances are not being created here on page refresh
let app;
// global event bus
window.Event = new Vue();
console.log("Event bus created");
/* This section ensures the firebase auth object isn't in an intermediary state. */
firebase.auth().onAuthStateChanged(() => {
if (!app) {
console.log("New Vue instance created");
app = new Vue({
el: '#app',
router,
store,
render: h => h(App)
});
}
});
请注意，这个特定组件正在两个不同的路由（“dashboard”和“home”）上重用，它们都通过以下代码保持活动状态。
// Template section of App.vue file
<template>
<div id="app">
<keep-alive
v-bind:include="[ 'dashboard', 'home' ]"
<router-view></router-view>
</keep-alive>
</div>
</template>
此外，由于这两条路由保持活动状态并被缓存，未能关闭 $off 事件发射器和侦听器不应该是重复的原因（至少我认为不应该）。
编辑 1：我在我的项目的每个目录中都找到了“鼠标输入”和“鼠标左键”，我可以确认这两个事件仅从我在这篇文章中引用的 Vue 组件发出。
编辑 2：为了帮助调试，我在最顶层的组件 (App.vue) 上放置了一个侦听器，以查看它是否接收到两次事件（请参阅下面代码片段中创建的挂钩）。我可以确认它也只收到一次事件。我还粘贴了完整的 App.vue 文件，因为上面的示例主要是为了说明我正在保持“仪表板”和“家”的活力。
<template>
<div id="app">
<keep-alive
v-bind:include="keepAlive">
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
isLoggedIn: false,
};
},
computed: {
keepAlive() {
if (this.isLoggedIn) {
return [ 'dashboard', 'home', 'results' ];
}
return [ 'landing', 'signIn', 'signUp' ];
}
},
watch: {
/* This watches for route changes */
$route(to, from) {
/* firebase.auth().currentUser returns null if user has logged out */
if (firebase.auth().currentUser) {
this.isLoggedIn = true;
} else {
this.isLoggedIn = false;
}
}
},
created() {
window.Event.$on("mouse-entered", () => {
console.log("mouse-entered-from-App.vue");
});
window.Event.$on("mouse-left", () => {
console.log("mouse-left-from-App.vue");
});
}
};
</script>
正如预期的那样，App.vue 接收到一次事件（见下文）；但是，我仍然在 Vue 开发工具中收到重复的事件 :(
