vue中监听屏幕的宽度

在Vue中监听屏幕的宽度可以使用`watch`属性结合`window.innerWidth`来实现，具体步骤如下：

1. 在Vue组件中定义一个响应式变量，用于保存屏幕的宽度，如`screenWidth`。

2. 在`mounted`钩子函数中，为`window`对象绑定一个`resize`事件监听函数。

3. 在`resize`事件监听函数中更新`screenWidth`的值。

4. 在`watch`属性中监听`screenWidth`的变化，当值变化时执行相应的操作。

示例代码如下：

<template>
  <div>
    <p>当前屏幕宽度：{{ screenWidth }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      screenWidth: window.innerWidth
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.screenWidth = window.innerWidth
    }
  },
  watch: {
    screenWidth(newVal, oldVal) {
      // 当屏幕宽度变化时执行相应的操作
      console.log('屏幕宽度变化了：', newVal, oldVal)
    }
  }
}
</script>