Vue实现定位并解决内存泄漏

// 组件A.vue
<template>
  <div>
    <button @click="sendMessage">广播消息</button>
  </div>
</template>
<script>
import { EventBus } from "./EventBus.js";
export default {
  methods: {
    sendMessage() {
      EventBus.$emit("message", "Hello world from A!");
    }
  }
};
</script>
// 组件B.vue
<template>
  <div>
    <p>{{ receivedMessage }}</p>
  </div>
</template>
<script>
import { EventBus } from "./EventBus.js";
export default {
  data() {
    return {
      receivedMessage: ""
    };
  },
  created() {
    EventBus.$on("message", message => {
      this.receivedMessage = message;
    });
  }
};
</script>

// ComponentB.vue
<template>
  <div>
    <p>{{ receivedMessage }}</p>
  </div>
</template>
<script>
import { EventBus } from "./EventBus.js";
export default {
  data() {
    return {
      receivedMessage: ""
    };
  },
  created() {
    EventBus.$on("message", message => {
      this.receivedMessage = message;
    });
  },
  beforeDestroy() {
    EventBus.$off("message"); //this line was missing previously
  }
};
</script>

<template>
   <div>
     <button @click="startShow">开始演示</button>
     <button @click="stopShow">停止演示</button>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
       intervalId: null
     };
   },
   methods: {
     startLeak() {
       this.intervalId = setInterval(() => {
         // Simulate some activity
         console.log("Interval running...");
       }, 1000);
     },
     stopLeak() {
       clearInterval(this.intervalId);
       this.intervalId = null;
     }
   }
 };
 </script>

<template>
   <div>
     <button @click="startShow">开始演示</button>
     <button @click="stopShow">停止演示</button>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
       intervalId: null
     };
   },
   methods: {
     startLeak() {
       this.intervalId = setInterval(() => {
         // Simulate some activity
         console.log("Interval running...");
       }, 1000);
     },
     stopLeak() {
       clearInterval(this.intervalId);
       this.intervalId = null;
     }
   },
@diff new
     beforeDestroy() {
     clearInterval(this.intervalId); // This line is missing above
   }
 };
 </script>

// cdn Choice Library
 <link rel='stylesheet prefetch' href='https://joshuajohnson.co.uk/Choices/assets/styles/css/choices.min.css?version=3.0.3'>
 <script src='https://joshuajohnson.co.uk/Choices/assets/scripts/dist/choices.min.js?version=3.0.3'></script>
 // our component
 <div id="app">
   <button
     v-if="showChoices"
     @click="hide"
   >Hide</button>
   <button
     v-if="!showChoices"
     @click="show"
   >Show</button>
   <div v-if="showChoices">
     <select id="choices-single-default"></select>
   </div>
 </div>
 // Script
 new Vue({
   el: "#app",
   data: function () {
     return {
       showChoices: true
     }
   },
   mounted: function () {
     this.initializeChoices()
   },
   methods: {
     initializeChoices: function () {
       let list = []
       // 创造更多的选项，方便直观的观察到内存泄漏
       for (let i = 0; i < 1000; i++) {
         list.push({
           label: "选项" + i,
           value: i
         })
       }
       new Choices("#choices-single-default", {
         searchEnabled: true,
         removeItemButton: true,
         choices: list
       })
     },
     show: function () {
       this.showChoices = true
       this.$nextTick(() => {
         this.initializeChoices()
       })
     },
     hide: function () {
       this.showChoices = false
     }
   }
 })