vue怎么监听浏览器页面大小变化

在 Vue 中监听浏览器页面大小变化，可以借助 window 对象的 resize 事件。下面是实现的步骤：

1. 在 mounted 钩子函数中，使用 addEventListener 方法为 window 对象添加 resize 事件监听器。

2. 在 beforeDestroy 钩子函数中，使用 removeEventListener 方法移除 resize 事件监听器。

3. 在 resize 事件处理函数中，更新 Vue 实例中的数据或执行相应的业务逻辑。

示例代码如下：

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

在上面的代码中，mounted 钩子函数中添加了 resize 事件监听器，并在beforeDestroy 钩子函数中移除监听器。handleResize 方法会在页面大小变化时被调用，更新 Vue 实例中的 windowWidth 和 windowHeight 数据。