vue监听窗口大小变化

可以使用Vue的watch属性来监听窗口大小变化。具体实现如下：

data() {
  return {
    windowWidth: window.innerWidth
  }
},
created() {
  window.addEventListener('resize', this.handleResize)
},
destroyed() {
  window.removeEventListener('resize', this.handleResize)
},
methods: {
  handleResize() {
    this.windowWidth = window.innerWidth
  }
}

在上面的代码中，我们首先在data中定义了一个windowWidth属性，用来存储当前窗口的宽度。然后在created钩子函数中，我们添加了一个resize事件监听器，当窗口大小发生变化时，会触发handleResize方法。在handleResize方法中，我们更新windowWidth属性的值，从而实现对窗口大小变化的监听。

相关问题

vue监听窗口大小变化 自动缩放

Vue可以通过监听窗口大小变化来实现自动缩放的效果。在Vue中，可以使用`@resize`事件来监听窗口大小变化，并在事件处理函数中更新组件的样式或其他属性。

例如，在一个需要自适应的组件中，可以使用如下代码来实现：

<template>
  <div class="container" :style="{ width: containerWidth + 'px', height: containerHeight + 'px' }">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      containerWidth: window.innerWidth,
      containerHeight: window.innerHeight
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.containerWidth = window.innerWidth
      this.containerHeight = window.innerHeight
    }
  }
}
</script>

在上述代码中，我们在组件中定义了一个`container`容器，使用`:style`绑定了容器的宽度和高度，这样容器的大小会随着窗口的大小变化而自动调整。在组件的`data`属性中，我们初始化了容器的宽度和高度为当前窗口的宽度和高度。在`mounted`中，我们通过`window.addEventListener`添加了一个窗口大小变化的事件监听器，监听到窗口大小变化的时候会触发`handleResize`方法来更新容器的宽度和高度。在`beforeDestroy`中，我们通过`window.removeEventListener`移除了监听器，以免在组件销毁的时候出现问题。

通过上述代码，我们就可以在Vue中实现窗口大小变化自动缩放的效果了。

vue 监听窗口大小

在Vue中，可以使用`watch`来监听窗口大小的变化。具体步骤如下：

1.在Vue组件中定义一个data属性，用来存储窗口宽度的值：

data() {
  return {
    windowWidth: window.innerWidth
  }
}

2.在Vue组件的mounted生命周期函数中添加监听事件：

mounted() {
  window.addEventListener('resize', this.handleResize)
},

methods: {
  handleResize() {
    this.windowWidth = window.innerWidth
  }
}

3.在Vue组件的destroyed生命周期函数中移除监听事件：

destroyed() {
  window.removeEventListener('resize', this.handleResize)
}

这样，当窗口大小变化时，`handleResize`方法会被调用，从而更新`windowWidth`属性的值。