Conclusion first

  1. Event listener, component logout remember to destroy.
  2. Component destruction specifies the destruction event.

instructions

  1. If event listening is not destroyed when the component is logged out, it will still be executed if triggered later, with possible side effects.
  2. If you do not specify the event to be destroyed and use this.xxx.$off(“emit”), all listening for this event will be removed. If other components (even the same component, but placed in two places on the page) also listen for this event, it will also be disabled.

The sample

main.js

const notify = new Vue();
Vue.prototype.notify = notify;
Copy the code

App.vue


<template>
  <div id="app">
    <CountComponent v-if="show" />
    <CountComponent2 />
    <button @click="click">Trigger count</button>
    <button @click="render">Unlog/re-render the first component</button>
  </div>
</template>

Copy the code

import CountComponent from "./components/CountComponent.vue";
import CountComponent2 from "./components/CountComponent2.vue";

export default {
  name: "App".components: { CountComponent, CountComponent2 },
  data() {
    return { show: true };
  },
  methods: {
    click() {
      this.notify.$emit("notify");
    },
    render() {
      this.show = !this.show; ,}}};Copy the code

CountComponent.vue


<template>
  <div>count: {{ count }}</div>
</template>

Copy the code

export default {
  data() {
    return { count: 0 };
  },
  mounted() {
    console.log("count component mounted");
    this.notify.$on("notify".this.listen);
  },
  beforeDestroy() {
    console.log("count component beforeDestroy");
    // Remove all listener events. When this component is referenced more than once, all referenced listeners are removed
    // this.notify.$off("notify");
    // Remove the specified listening event
    // this.notify.$off("notify", this.listen);
  },
  methods: {
    listen() {
      console.log("count component listen");
      this.count++; ,}}};Copy the code

Make a copy of countComponent2.vue and change it to print the string.

Page as shown below:

  1. When neither of the two $OFF statements is executed in beforeDestroy, the console prints both statements at the same time even if the first component is deregistered and the trigger count button is clicked. If you re-render the first component, the print statement becomes three…

  2. If you unpack the following code in the first component:

    // Remove all listener events. When this component is referenced more than once, all referenced listeners are removed
     this.notify.$off("notify");
Copy the code

After unregistering the first component, nothing happens when you click the trigger count button. When clicked after re-rendering, only the event listener function of the first component will be triggered and only one log will be printed.

  1. If you unpack the following code in the first component:
    // Remove the specified listening event
    this.notify.$off("notify".this.listen);
Copy the code

This is the ideal situation: there is only one print statement, and the counter on the page still changes. Two print logs appear when you re-render.

I also noticed that the first component’s event listener handler is executed first and then the second component’s. If the first component logs out and then re-renders, the second component’s event listener handler is executed after the second component. I don’t know if I’m gonna step in this hole.

Click here to see sample code

Afterword.

This. Notify is always there, calling its $ON and $off methods, independent of the page component.