vue监听浏览器窗口变化

Vue.js 是一种流行的前端框架，它提供了一种高效的方式来创建动态网页应用。Vue 支持在组件中监听各种事件和属性的变化，这其中就包括监听浏览器窗口的状态改变，比如大小变化、位置变化、方向变化等。这通常是通过 `watch` 对象来完成的。

下面是一个简单的例子说明如何使用 Vue 来监听并响应浏览器窗口的变化：

首先，在 Vue 实例或组件的 `data` 属性中定义一些依赖于窗口状态的数据变量。例如，我们想实时更新一个数据变量，反映当前浏览器窗口的宽度：

<template>
  <div id="app">
    现在的窗口宽度是：{{ currentWindowWidth }}
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      currentWindowWidth: null,
    };
  },
  mounted() {
    // 初始化加载时设置窗口宽度
    this.$nextTick(() => {
      this.updateWindowSize();
    });
    
    // 监听窗口变化
    window.addEventListener('resize', this.updateWindowSize);
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听
    window.removeEventListener('resize', this.updateWindowSize);
  },
  methods: {
    updateWindowSize() {
      this.currentWindowWidth = window.innerWidth;
    }
  }
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

在这个例子中：
1. **初始化加载**：在组件挂载到 DOM 上之后立即读取窗口的初始宽度并赋值给 `currentWindowWidth`。
2. **添加事件监听**：使用 `window.addEventListener('resize', this.updateWindowSize);` 添加了一个事件监听器，当浏览器窗口大小发生变化时，会触发 `updateWindowSize` 方法。
3. **处理事件**：在 `updateWindowSize` 方法内部，我们简单地将 `window.innerWidth` 赋值给了 `this.currentWindowWidth`，使得 `currentWindowWidth` 随着窗口大小的变化而动态更新。
4. **清理监听**：在组件销毁之前，我们需要清除掉先前添加的事件监听器，以免导致内存泄漏。

这样，当你调整浏览器窗口大小时，页面上显示的 “现在的窗口宽度” 就会即时更新，反映出新的窗口宽度值。这对于实现响应式设计或是基于窗口大小条件的不同交互逻辑非常有用。