когдаизменилось, почему старый компонент маршрутизатора все еще находится в состоянии '$ on' и может обрабатывать событие?

Question

ммммм ... позвольте мне объяснить ситуацию, с которой я встречаюсь.У меня есть родительский компонент с двумя дочерними элементами, который освещает одно и то же событие и выполняет одно и то же . (Коды приведены ниже):

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 }
  ]
},

Во время каждого события 'edit' должно быть три коммита, не так ли?

На самом деле.Во-первых, он имеет 3 коммитов.

Но когда я переключаюсь с «/ main / service» на «/ main / model», он делает 6 коммитов во время каждого события «edit» (старый компонент ServiceContent по-прежнему делал 3 коммитаи новый компонент ModelContent предлагает 3 коммита).

когда я возвращаюсь в '/ main / service', 9 коммитов !!!

devtool:

Кажется, что когда изменилось представление маршрутизатора, компонент старого представления все еще может прослушивать событие, как я могу это исправить?(EventBus - просто глобальный экземпляр vue, используемый в качестве шины)

Answer 1

Я бы начал с ручной очистки слушателей в функции 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)
}

Answer 2

Когда вы звоните $on(), Vue регистрирует вашу функцию обратного вызова внутри себя в качестве наблюдателя.Это означает, что ваша функция работает даже после того, как компонент отключен.

Что вам нужно сделать, это использовать $off, когда компонент отключен.

Например,

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