Vue3组件中onbeforeprint/onafterprint需在卸载时重置吗？如何操作？

是的，必须在组件卸载时取消这些事件绑定，原因有两个：

• 组件卸载后，这些回调函数仍会被window保留，可能引发内存泄漏；
• 如果后续有其他组件或代码也绑定了onbeforeprint/onafterprint事件，当前组件的赋值方式会直接覆盖原有绑定，卸载时不清理的话，要么残留旧逻辑，要么影响其他代码的事件绑定。

最佳实践：使用addEventListener/removeEventListener替代直接赋值 #

直接给window.onbeforeprint赋值的方式是独占式的，同一时间只能有一个回调生效，推荐改用标准的事件监听API，这样可以避免覆盖其他绑定，同时能精准移除自己的回调：

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const clearPlaceholders = () => { /* 你的逻辑 */ };
    const setPlaceholders = () => { /* 你的逻辑 */ };

    onMounted(() => {
      window.addEventListener('beforeprint', clearPlaceholders);
      window.addEventListener('afterprint', setPlaceholders);
    });

    onUnmounted(() => {
      window.removeEventListener('beforeprint', clearPlaceholders);
      window.removeEventListener('afterprint', setPlaceholders);
    });
  }
};

如果你坚持用直接赋值的方式（不推荐） #

如果因为某些原因必须用window.onbeforeprint赋值，卸载时要将其重置为null，但要注意这种方式会清除所有绑定的回调，可能影响其他代码：

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const clearPlaceholders = () => { /* 你的逻辑 */ };
    const setPlaceholders = () => { /* 你的逻辑 */ };

    onMounted(() => {
      window.onbeforeprint = clearPlaceholders;
      window.onafterprint = setPlaceholders;
    });

    onUnmounted(() => {
      window.onbeforeprint = null;
      window.onafterprint = null;
    });
  }
};

额外注意事项 #

• 确保回调函数是引用一致的，不要在addEventListener里用匿名函数，否则removeEventListener无法找到对应的回调（匿名函数每次创建都是新引用）；
• 如果你的组件是复用的（比如在多个地方渲染），使用addEventListener的方式可以保证每个实例的回调都能正确绑定和移除，不会互相干扰。

内容的提问来源于stack exchange，提问作者Norm Strassner