编辑“︁Vue.js内存泄漏防范”︁（章节）

== 常见内存泄漏场景 ==  
=== 1. 未销毁的事件监听器 ===  
在Vue组件中，手动添加的DOM事件监听器（如通过`addEventListener`）若未在组件销毁时移除，会导致监听器持续引用组件实例，阻止垃圾回收。  

<syntaxhighlight lang="javascript">  
// 错误示例  
export default {  
  mounted() {  
    window.addEventListener('resize', this.handleResize);  
  },  
  methods: {  
    handleResize() {  
      console.log('Window resized');  
    }  
  }  
};  

// 正确做法：在beforeUnmount或unmounted钩子中移除监听器  
export default {  
  mounted() {  
    window.addEventListener('resize', this.handleResize);  
  },  
  beforeUnmount() {  
    window.removeEventListener('resize', this.handleResize);  
  }  
};  
</syntaxhighlight>  

=== 2. 未清理的定时器 ===  
`setInterval`或`setTimeout`若未及时清除，会持续占用内存：  
<syntaxhighlight lang="javascript">  
// 错误示例  
export default {  
  mounted() {  
    this.timer = setInterval(() => {  
      console.log('Running...');  
    }, 1000);  
  }  
};  

// 正确做法  
export default {  
  mounted() {  
    this.timer = setInterval(() => {  
      console.log('Running...');  
    }, 1000);  
  },  
  beforeUnmount() {  
    clearInterval(this.timer);  
  }  
};  
</syntaxhighlight>  

=== 3. 全局状态残留 ===  
在Vuex或Pinia中，若组件未正确注销对全局状态的引用（如订阅或观察者），可能导致状态无法释放：  
<syntaxhighlight lang="javascript">  
// Vuex示例  
export default {  
  mounted() {  
    this.unsubscribe = this.$store.subscribe((mutation) => {  
      console.log(mutation.type);  
    });  
  },  
  beforeUnmount() {  
    this.unsubscribe(); // 必须取消订阅  
  }  
};  
</syntaxhighlight>