面试题：Vue侦听器在组件销毁时如何正确清理副作用

在Vue组件中，可以利用beforeUnmount生命周期钩子函数来清理由侦听器产生的副作用。以下是具体的阐述和代码示例：

阐述

添加侦听器：在组件的created或mounted钩子函数中添加侦听器，并在侦听器回调函数中执行副作用操作，如创建定时器或订阅外部事件。
清理副作用：在beforeUnmount钩子函数中取消订阅外部事件或清除定时器，以确保在组件销毁时，这些副作用操作不会继续占用资源，从而避免内存泄漏。

代码示例

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

<script setup>
import { ref, onBeforeUnmount, watch } from 'vue';

const count = ref(0);
let timer;

watch(count, (newValue) => {
  // 副作用操作：创建一个定时器
  timer = setInterval(() => {
    console.log(`Count has changed to ${newValue}`);
  }, 1000);
});

onBeforeUnmount(() => {
  // 清理副作用：清除定时器
  clearInterval(timer);
});
</script>

在上述代码中，watch函数用于监听count的变化，在变化时创建一个定时器作为副作用操作。onBeforeUnmount钩子函数则在组件销毁前清除这个定时器，避免了内存泄漏。

如果是订阅外部事件的情况，示例如下：

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script setup>
import { onBeforeUnmount } from 'vue';

let eventListener;

const handleClick = () => {
  console.log('Button clicked');
};

const addEventListener = () => {
  eventListener = () => {
    handleClick();
  };
  window.addEventListener('resize', eventListener);
};

const removeEventListener = () => {
  window.removeEventListener('resize', eventListener);
};

addEventListener();

onBeforeUnmount(() => {
  removeEventListener();
});
</script>

在此示例中，在组件内添加了一个窗口大小改变的事件监听器作为副作用，在beforeUnmount钩子函数中移除该监听器，防止内存泄漏。

星途面试题库

面试题：Vue侦听器在组件销毁时如何正确清理副作用

知识考点

面试题答案

阐述

代码示例