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

Posted 2023-02-23

【中文标题】当 <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 实例，用作总线）

【参考方案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