要如何动态监视视口大小的变化

一些样式需要根据不同的视口大小做想要改变，我想通过得到视口大小的数据，然后以此作为判断条件来改变样式

但是我只能在页面刚加载出来的时候得到窗口大小的数据，后改变视口大小，比如改成宽只有390的移动端视口，就没办法再触发得到数据的方法了，导致数据无法动态更新，也就不能作为判断条件了

我写的得到视口大小的数据代码如下：

created() {
      this.windowInnerWidth = window.innerWidth
      console.log(this.windowInnerWidth)
    },

watch: {
      windowInnerWidth(newValue,oldValue) {
        this.windowInnerWidth = newValue
        console.log('windowInnerWidth:',newValue,oldValue)
      },

要如何动态得到视口的大小数据呢，比如我现在是PC端的页面，就得到PC的视口大小数据，然后在浏览器的开发者工具中改成移动端的开发模式，视口变小，就再次触发方法得到目前的视口大小数据，如果再切回PC端就重新再得到一遍数据

【以下回答由 GPT 生成】

首先，我可以看到你已经在 created 钩子函数中获取了初始的窗口大小数据，并使用了 console.log 输出到控制台。

要动态获取视口大小数据，你应该监听 window 对象上的 resize 事件，并在事件处理函数中更新 windowInnerWidth 数据。这样，每当视口大小发生变化时，该事件处理函数就会被触发。

以下是具体的解决方案：

1. 在 mounted 生命周期钩子函数中，添加 resize 事件监听器。

2. 创建一个方法 updateWindowInnerWidth，该方法会在 resize 事件处理函数中调用，用于更新 windowInnerWidth 数据。

3. 在 beforeDestroy 生命周期钩子函数中，移除 resize 事件监听器，以防止在组件销毁之后继续触发事件处理函数。

下面是代码示例：

export default {
  data() {
    return {
      windowInnerWidth: 0
    };
  },
  mounted() {
    window.addEventListener('resize', this.updateWindowInnerWidth);
    // 初始化时调用一次
    this.updateWindowInnerWidth();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateWindowInnerWidth);
  },
  methods: {
    updateWindowInnerWidth() {
      this.windowInnerWidth = window.innerWidth;
      console.log('windowInnerWidth:', this.windowInnerWidth);
    }
  }
};

现在，你可以在 updateWindowInnerWidth 方法中添加你想要根据不同视口大小进行的样式更改。注意，resize 事件会在视口大小变化时频繁触发，你可以使用节流函数来控制事件处理函数的执行频率，以优化性能。

通过这样的解决方案，你可以在动态监测视口大小变化，并根据不同的视口大小来改变样式。

【相关推荐】

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/746346

加个监听事件，监听resize事件来动态监听视口大小的变化

window.onresize = function () {
  // do something
}