当 <router-view/> 改变时，为什么路由器的旧组件仍然 '$on' 并处理事件？答案

【问题标题】：When <router-view/> changed,why can the old component of router still '$on' and handle the event?当 <router-view/> 改变时，为什么路由器的旧组件仍然 '$on' 并处理事件？
【发布时间】：2019-02-23 03:25:16
【问题描述】：

emmmmm...让我解释一下我遇到的情况。我有一个带有两个子组件的父组件，它们都 litsen 相同的事件 并执行 相同的事情。（下面的代码）：

mounted() {
 EventBus.$on('edit', (data) => {
  console.log('service called')
  this.showRightSide(data)
 })
},

showRightSide(data) {
  console.log(data)
  // display right-side operator edit page.
  this.$store.commit({
    type: 'setShownState',
    shown: true
  })
  // giving operator name & operator type
  this.$store.commit({
    type: 'setOptName',
    optName: data.name
  })
  this.$store.commit({
    type: 'setOptType',
    optType: data.type
  })
},

使用下面的 vue 路由器

{
  path: '/main',
  name: 'Main',
  component: Main,
  children: [
    { path: 'service', name: 'Service', component: ServiceContent },
    { path: 'model', name: 'Model', component: ModelContent }
  ]
},

在每个“编辑”事件期间应该有三个提交，不是吗？

事实上。首先，它有 3 个提交。

但是当我从 '/main/service' 更改为 '/main/model' 时，它在每个 'edit' 事件期间进行了 6 次提交（旧的 ServiceContent 组件仍然进行了 3 次提交，而新的 ModelContent 组件提供 3 个提交）。

当我回到“/main/service”时，9 次提交！！！

开发工具：

似乎当router-view发生变化时，旧视图的组件仍然可以监听事件，我该如何解决？（EventBus 只是一个全局的 vue 实例，用作总线）

【问题讨论】：

标签： javascript vue.js vue-component vue-router

【解决方案1】：

当您调用$on() 时，Vue 会在内部将您的回调函数注册为观察者。这意味着您的功能仍然存在，即使在组件被卸载后也是如此。

您应该在卸载组件时使用$off。

例如

methods: {
  showRights (data) {
    // etc
  }
},
mounted () {
  EventBus.$on('edit', this.showRights)
},
beforeDestroy () {
  EventBus.$off('edit', this.showRights)
}

【讨论】：

【解决方案2】：

我将从在 beforeUnmount 函数中手动清理侦听器开始。由于 JS 处理垃圾收集的方式，如果 vue 足够聪明地清理像这样的外部引用的东西，我会感到惊讶。

methods: {
  handleEventBusEdit(data) {
    console.log('service called')
    this.showRightSide(data)
  }
},
mounted() {
 EventBus.$on('edit', this.handleEventBusEdit)
},
beforeDestroy() {
  EventBus.$off('edit', this.handleEventBusEdit)
}

【讨论】：

天哪，相差17秒！ :D