时间戳

首页 > 解决方案 > 已销毁的 Vue 组件的 Mixin 仍在监听事件

javascript - 已销毁的 Vue 组件的 Mixin 仍在监听事件

问题描述

我有一个父组件有条件地呈现两个子组件之一：

<template>
  <div>
    <!-- other code that changes conditional rendering -->

    <folders v-if="isSearchingInFolders" :key="1234"></folders>
    <snippets v-if="!isSearchingInFolders" :key="5678"></snippets>
  </div>
</template>

这些组件中的每一个都在本地使用相同的 mixin (searchMixin)，如下所示：

<template>
  <div>
    <div>
      <snippet
        v-for="item in items"
        :snippet="item"
        :key="item.id">
      </snippet>
      <img v-if="busy" src="/icons/loader-grey.svg" width="50">
    </div>
    <button @click="getItems">Get More</button>
  </div>
</template>

<script>
import searchMixin from './mixins/searchMixin';
import Snippet from './snippet';

export default {
  components: { Snippet },

  mixins: [searchMixin],

  data() {
    return {
      resourceName: 'snippets'
    }
  },
}
</script>

每个组件在功能上都是等效的，但标记略有不同，因此出于本示例的目的，文件夹可以替换为片段，反之亦然。

我使用的 mixin 看起来像这样（简化）：

import axios from 'axios'
import  { EventBus } from '../event-bus';

export default {

  data() {
    return {
      hasMoreItems: true,
      busy: false,
      items: []
    }
  },

  created() {
    EventBus.$on('search', this.getItems)
    this.getItems();
  },

  destroyed() {
    this.$store.commit('resetSearchParams')
  },

  computed: {
    endpoint() {
      return `/${this.resourceName}/search`
    },

    busyOrMaximum() {
      return this.busy || !this.hasMoreItems;
    }
  },

  methods: {
    getItems(reset = false) {
      <!-- get the items and add them to this.items -->
    }
  }
}

在父组件中，当我通过更改isSearchingInFolders变量来切换渲染时，预期的组件被破坏并从 DOM 中删除（我已经通过从destroyed()生命周期挂钩记录来检查这一点。但是searchMixin，包含在该组件中的组件似乎没有被破坏，并且仍然似乎在侦听事件。这意味着当EventBus.$on('search', this.getItems)在更改从父级主动呈现的组件后触发该行时，this.getItems()会触发两次。一次用于文件夹，一次用于片段！

我期待组件的 mixin 与组件本身一起被销毁。我是否误解了组件销毁的工作原理？

标签： javascriptvue.jsvuejs2vue-componentmixins

解决方案

是的，当您传递事件处理程序时，EventBus 会保留对您传递的函数的引用。这可以防止组件对象的破坏。因此，您需要通过调用清除引用，EventBus.$off以便可以破坏组件。所以你的销毁事件钩子应该是这样的：

destroyed() {
    this.$store.commit('resetSearchParams')
    EventBus.$off('search', this.getItems)
  },

推荐阅读