vue如何监听窗口大小

Vue监听窗口大小的方法主要有以下几种：1、使用window.addEventListener监听resize事件，2、使用Vue的自定义指令，3、使用Vue的第三方库，如vue-resize。

一、使用`window.addEventListener`监听`resize`事件

在Vue组件中，我们可以使用window.addEventListener来监听窗口大小的变化。在组件的mounted生命周期钩子中添加事件监听，并在组件销毁时移除事件监听，以避免内存泄漏。

export default {

  data() {
    return {
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight
    };
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth;
      this.windowHeight = window.innerHeight;
    }
  }
}

解释：

1. 在data中定义两个属性windowWidth和windowHeight来存储窗口的宽度和高度。
2. 在mounted生命周期钩子中，使用window.addEventListener('resize', this.handleResize)来监听窗口大小的变化。
3. 在beforeDestroy生命周期钩子中，使用window.removeEventListener('resize', this.handleResize)移除事件监听，防止内存泄漏。
4. 在methods中定义handleResize方法，当resize事件触发时，更新windowWidth和windowHeight的值。

二、使用Vue的自定义指令

我们还可以通过创建自定义指令来监听窗口大小的变化，这种方法可以更方便地在多个组件中复用。

// directives/resize.js

export default {
  bind(el, binding) {
    el._resizeHandler = () => {
      binding.value();
    };
    window.addEventListener('resize', el._resizeHandler);
  },
  unbind(el) {
    window.removeEventListener('resize', el._resizeHandler);
    delete el._resizeHandler;
  }
};
// main.js
import Vue from 'vue';
import resize from './directives/resize';
Vue.directive('resize', resize);
// In your component
export default {
  directives: {
    resize: {
      inserted(el, binding) {
        binding.value();
      },
      unbind(el) {
        window.removeEventListener('resize', el._resizeHandler);
      },
    },
  },
  methods: {
    handleResize() {
      console.log('Window resized');
    },
  },
};

解释：

1. 创建一个新的指令文件resize.js，在bind钩子中添加resize事件监听，并在unbind钩子中移除事件监听。
2. 在main.js中全局注册这个指令。
3. 在组件中使用这个指令，并在inserted钩子中调用传递的方法。

三、使用第三方库`vue-resize`

vue-resize是一个专门用于监听元素大小变化的Vue插件，可以非常方便地用于监听窗口大小变化。

// 安装vue-resize

npm install vue-resize
// main.js
import Vue from 'vue';
import { ResizeObserver } from 'vue-resize';
import 'vue-resize/dist/vue-resize.css';
Vue.component('ResizeObserver', ResizeObserver);
// In your component
<template>
  <ResizeObserver @notify="handleResize">
    <div>
      <!-- Your component content -->
    </div>
  </ResizeObserver>
</template>
<script>
export default {
  methods: {
    handleResize() {
      console.log('Window resized');
    },
  },
};
</script>

解释：

1. 通过npm安装vue-resize。
2. 在main.js中引入并全局注册ResizeObserver组件。
3. 在组件模板中使用ResizeObserver包裹需要监听大小变化的内容，并在notify事件中调用处理方法。

总结与建议

通过上述几种方法，我们可以在Vue中监听窗口大小的变化。具体选择哪种方法可以根据项目的需求和复杂度来决定：

1. 使用window.addEventListener：适用于单个组件中需要监听窗口大小变化的情况，简单直接。
2. 使用自定义指令：适用于多个组件中需要复用监听逻辑的情况，代码更具复用性。
3. 使用第三方库vue-resize：适用于需要监听复杂元素大小变化的情况，且希望使用现成的解决方案。

在选择方法时，应注意性能和内存泄漏问题，确保在适当的生命周期钩子中添加和移除事件监听。通过合理的设计和实现，可以有效地监听窗口大小变化，并做出相应的响应。

相关问答FAQs：

1. 如何在Vue中监听窗口大小变化？

在Vue中，你可以使用Vue的生命周期钩子函数和window对象的resize事件来监听窗口大小的变化。下面是具体的步骤：

• 首先，在你的Vue组件中，创建一个data属性来存储窗口的宽度和高度：

data() {
  return {
    windowWidth: 0,
    windowHeight: 0
  }
}

• 然后，在Vue的mounted生命周期钩子函数中，添加一个窗口大小变化的事件监听器，并将窗口的宽度和高度保存在data属性中：

mounted() {
  this.getWindowSize();
  window.addEventListener('resize', this.getWindowSize);
},
methods: {
  getWindowSize() {
    this.windowWidth = window.innerWidth;
    this.windowHeight = window.innerHeight;
  }
}

• 最后，在你的Vue组件中，可以通过windowWidth和windowHeight来获取窗口的宽度和高度，从而根据窗口大小的变化来做出相应的响应式处理。

<template>
  <div>
    <p>窗口宽度: {{ windowWidth }}px</p>
    <p>窗口高度: {{ windowHeight }}px</p>
  </div>
</template>

这样，当窗口大小发生变化时，Vue会自动更新windowWidth和windowHeight的值，并重新渲染组件。

2. 如何在Vue中实时响应窗口大小的变化？

如果你需要实时响应窗口大小的变化，而不仅仅是在窗口大小发生变化后更新一次，你可以使用window对象的resize事件结合Vue的watch属性来实现。

首先，在Vue组件的data属性中添加一个新的属性resizeTimer，用来保存resize事件的计时器：

data() {
  return {
    windowWidth: 0,
    windowHeight: 0,
    resizeTimer: null
  }
}

然后，在Vue组件的mounted生命周期钩子函数中添加resize事件的监听器，并在事件处理函数中使用watch属性来实时响应窗口大小的变化：

mounted() {
  this.getWindowSize();
  window.addEventListener('resize', this.resizeHandler);
},
methods: {
  getWindowSize() {
    this.windowWidth = window.innerWidth;
    this.windowHeight = window.innerHeight;
  },
  resizeHandler() {
    clearTimeout(this.resizeTimer);
    this.resizeTimer = setTimeout(() => {
      this.getWindowSize();
    }, 200);
  }
},
watch: {
  windowWidth(newWidth) {
    // 窗口宽度发生变化时的响应处理
    // 可以在这里更新其他与窗口大小相关的数据或执行其他操作
  },
  windowHeight(newHeight) {
    // 窗口高度发生变化时的响应处理
    // 可以在这里更新其他与窗口大小相关的数据或执行其他操作
  }
}

这样，当窗口大小发生变化时，Vue会实时更新windowWidth和windowHeight的值，并执行相应的响应处理。

3. 如何在Vue中取消窗口大小变化的监听？

如果你在Vue组件中不再需要监听窗口大小的变化，你可以在Vue的beforeDestroy生命周期钩子函数中取消对resize事件的监听。

在Vue组件中，添加一个beforeDestroy生命周期钩子函数，并在函数中移除resize事件的监听器：

beforeDestroy() {
  window.removeEventListener('resize', this.resizeHandler);
}

这样，当Vue组件被销毁时，窗口大小变化的监听器也会被移除，避免了潜在的内存泄漏问题。