Vue.js 2：窗口Resize至特定宽度时给Div加类的后续实现咨询

嘿，你已经搞定了窗口resize监听的基础工作，接下来几步就能实现给指定div动态加类的需求啦！我给你一步步拆解清楚：

1. 在data中定义必要变量 #

首先，你需要在组件的data里存储当前窗口宽度，以及一个标记是否达到目标宽度阈值的状态（用变量管理会让逻辑更清晰）：

data() {
  return {
    windowWidth: window.innerWidth, // 初始化时直接获取当前窗口宽度
    isTargetWidth: false // 标记是否满足宽度条件
  };
}

2. 完善resize处理方法 #

接下来要给handleWindowResize补充宽度判断逻辑，注意要接收event参数（不然在严格模式下event会找不到）。假设你的目标宽度是768px（移动端常见阈值，你可以改成自己需要的数值）：

methods: {
  handleWindowResize(event) {
    this.windowWidth = event.currentTarget.innerWidth;
    // 判断是否达到目标宽度，这里以「小于等于768px」为例
    this.isTargetWidth = this.windowWidth <= 768;
  }
}

3. 在模板中绑定动态类 #

把刚才定义的状态绑定到目标div上，用Vue的动态class语法，就能自动根据条件添加类了：

<template>
  <!-- 这里的「target-class」是你想要添加的类名，记得在样式里定义它 -->
  <div :class="{ 'target-class': isTargetWidth }">
    <!-- 你的div内容 -->
  </div>
</template>

4. 初始化时执行一次判断 #

为了让页面刚加载时就根据当前窗口宽度应用类，别忘了在mounted里手动调用一次处理方法：

mounted() {
  window.addEventListener('resize', this.handleWindowResize);
  // 初始化时执行一次，避免页面加载时状态不匹配
  this.handleWindowResize({ currentTarget: window });
}

5. 组件销毁时移除监听（重要！） #

为了避免内存泄漏，组件销毁时一定要移除resize事件监听：

// Vue 3 请用 beforeUnmount 钩子
beforeUnmount() {
  window.removeEventListener('resize', this.handleWindowResize);
}

// 如果是 Vue 2，改用 destroyed 钩子
// destroyed() {
//   window.removeEventListener('resize', this.handleWindowResize);
// }

额外优化：防抖处理（可选） #

窗口resize时事件触发频率很高，会影响性能，你可以给处理方法加个防抖：

// 这里用lodash的debounce，如果你没引入lodash也可以自己写防抖函数
methods: {
  handleWindowResize: _.debounce(function(event) {
    this.windowWidth = event.currentTarget.innerWidth;
    this.isTargetWidth = this.windowWidth <= 768;
  }, 200) // 200ms延迟，可根据需求调整
}

内容的提问来源于stack exchange，提问作者Alyssa Reyes