面试题：Vue组件内多种事件的节流与防抖综合应用

Question

假设你正在开发一个Vue组件，该组件中有一个按钮点击事件和一个窗口滚动事件。按钮点击会触发数据更新操作，窗口滚动会触发一些页面布局调整操作。为了优化性能，按钮点击事件需要防抖处理，窗口滚动事件需要节流处理。请编写完整的Vue组件代码来实现这两个功能，并说明在组件销毁时如何正确清理相关的定时器或事件监听器，避免内存泄漏。

Answer 1

<template>
  <div>
    <button @click="debouncedClick">点击按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      debounceTimer: null,
      throttleTimer: null,
      // 假设的数据
      dataToUpdate: ''
    };
  },
  mounted() {
    window.addEventListener('scroll', this.throttledScroll);
  },
  methods: {
    updateData() {
      // 这里写数据更新的逻辑
      this.dataToUpdate = '更新后的数据';
    },
    debouncedClick() {
      if (this.debounceTimer) {
        clearTimeout(this.debounceTimer);
      }
      this.debounceTimer = setTimeout(() => {
        this.updateData();
      }, 300);
    },
    adjustLayout() {
      // 这里写页面布局调整的逻辑
      console.log('页面布局调整');
    },
    throttledScroll() {
      if (!this.throttleTimer) {
        this.adjustLayout();
        this.throttleTimer = setTimeout(() => {
          this.throttleTimer = null;
        }, 300);
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.throttledScroll);
    if (this.debounceTimer) {
      clearTimeout(this.debounceTimer);
    }
    if (this.throttleTimer) {
      clearTimeout(this.throttleTimer);
    }
  }
};
</script>

组件销毁时的清理说明

1. 事件监听器清理：在beforeDestroy钩子函数中，通过window.removeEventListener('scroll', this.throttledScroll)移除窗口滚动事件监听器，避免在组件销毁后仍然执行相关回调函数，从而导致内存泄漏。
2. 定时器清理：在beforeDestroy钩子函数中，检查debounceTimer和throttleTimer是否存在，如果存在则使用clearTimeout清除定时器，防止定时器在组件销毁后继续运行占用内存。