前端vue如何获取屏幕宽度

可以通过使用Vue.js的计算属性和window对象中的innerWidth属性来获取屏幕宽度。以下是一个示例：

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

<script>
export default {
  data() {
    return {
      screenWidth: 0
    };
  },
  computed: {
    // 计算属性，获取屏幕宽度
    getWindowWidth() {
      return window.innerWidth;
    }
  },
  mounted() {
    // 监听窗口大小变化，更新屏幕宽度
    window.addEventListener('resize', () => {
      this.screenWidth = this.getWindowWidth;
    });
    // 初始化屏幕宽度
    this.screenWidth = this.getWindowWidth;
  },
  beforeDestroy() {
    // 移除监听
    window.removeEventListener('resize', () => {
      this.screenWidth = this.getWindowWidth;
    });
  }
};
</script>

在mounted钩子函数中，我们监听窗口大小变化事件，并更新屏幕宽度。在beforeDestroy钩子函数中，我们移除监听以避免内存泄漏。