如何在屏幕尺寸变化时修改Vue.js的data数据值？

这问题我做响应式页面时也碰到过，核心思路就是监听窗口的resize事件，根据屏幕宽度动态更新Vue实例里的mobile字段，同时为了避免频繁触发事件影响性能，最好加上防抖处理。下面给你完整的实现代码和细节解释：

完整实现代码 #

<div id="app"> 
  <ul> 
    <!-- 在移动设备上使用短标题 -->
    <template v-if="mobile === 1"> 
      <li><a href="#">Heading</a></li> 
    </template> 
    <!-- 否则使用长标题 -->
    <template v-else> 
      <li><a href="#">Heading Long</a></li> 
    </template> 
  </ul> 
</div> 

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> 
<script> 
// 简单的防抖函数，避免resize频繁触发
function debounce(func, delay = 200) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

var app = new Vue({ 
  el: '#app',
  data: {
    mobile: 0 // 初始值，会在mounted时更新
  },
  mounted() {
    // 页面加载时先执行一次判断，确保初始显示正确
    this.checkScreenSize();
    // 监听窗口resize事件，用防抖函数包装
    window.addEventListener('resize', debounce(this.checkScreenSize));
  },
  beforeDestroy() {
    // 组件销毁时移除监听，避免内存泄漏
    window.removeEventListener('resize', debounce(this.checkScreenSize));
  },
  methods: {
    checkScreenSize() {
      // 这里可以自定义移动端的宽度阈值，比如768px
      const isMobile = window.innerWidth < 768;
      // 更新mobile值，Vue会自动触发视图更新
      this.mobile = isMobile ? 1 : 0;
    }
  }
});
</script>

关键细节解释 #

• 防抖函数：debounce函数可以让resize事件在停止触发200ms后才执行判断逻辑，避免窗口拖动过程中频繁更新数据和视图，提升性能。
• 初始化判断：在mounted钩子中先执行一次checkScreenSize，确保页面刚加载时就根据当前屏幕尺寸显示正确的标题，而不是等到第一次resize才更新。
• 移除事件监听：在beforeDestroy钩子中移除resize监听，防止组件销毁后事件仍然存在导致内存泄漏。
• 动态更新data：在checkScreenSize方法里修改this.mobile，Vue的响应式系统会自动检测到值的变化，从而切换显示对应的标题模板。

你可以根据自己的需求调整window.innerWidth < 768这个阈值，比如改成640px或者其他符合你设计的移动端断点。

内容的提问来源于stack exchange，提问作者Will Moore