vue如何监听手机端页面大小

要在 Vue 中监听手机端页面大小，可以通过以下三种方法：1、使用 window 的 resize 事件，2、使用 Vue 的生命周期钩子，3、使用 Vue 的指令。其中，使用 window 的 resize 事件最为常见。下面将详细介绍这种方法，并提供示例代码。

一、使用 WINDOW 的 RESIZE 事件

通过 window.addEventListener 来监听窗口大小变化事件，可以实时获取屏幕的宽度和高度，并在 Vue 组件中进行相应处理。

<template>

  <div>
    <p>当前窗口宽度：{{ windowWidth }}</p>
    <p>当前窗口高度：{{ windowHeight }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight,
    };
  },
  created() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth;
      this.windowHeight = window.innerHeight;
    },
  },
};
</script>

解释：

1. 创建 data 属性：在 Vue 组件的 data 中定义 windowWidth 和 windowHeight，以存储当前窗口的宽度和高度。
2. 使用生命周期钩子：在 created 钩子中添加 resize 事件监听器，在 beforeDestroy 钩子中移除监听器，以避免内存泄漏。
3. 定义方法：定义 handleResize 方法，在窗口大小改变时更新 windowWidth 和 windowHeight。

二、使用 VUE 的生命周期钩子

除了直接使用 window 对象的事件监听器，还可以利用 Vue 的生命周期钩子更方便地管理事件。

<template>

  <div>
    <p>当前窗口宽度：{{ windowWidth }}</p>
    <p>当前窗口高度：{{ windowHeight }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      windowWidth: 0,
      windowHeight: 0,
    };
  },
  mounted() {
    this.updateWindowSize();
    window.addEventListener('resize', this.updateWindowSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateWindowSize);
  },
  methods: {
    updateWindowSize() {
      this.windowWidth = window.innerWidth;
      this.windowHeight = window.innerHeight;
    },
  },
};
</script>

解释：

1. mounted 钩子：在 mounted 钩子中，初次调用 updateWindowSize 方法获取当前窗口尺寸，并为 resize 事件添加监听器。
2. beforeDestroy 钩子：在 beforeDestroy 钩子中移除 resize 事件监听器，避免内存泄漏。
3. updateWindowSize 方法：通过 window.innerWidth 和 window.innerHeight 获取窗口宽度和高度，并更新组件的 data 属性。

三、使用 VUE 的指令

通过自定义指令，可以将监听窗口大小变化的逻辑封装在指令中，便于复用。

<template>

  <div v-resize="onResize">
    <p>当前窗口宽度：{{ windowWidth }}</p>
    <p>当前窗口高度：{{ windowHeight }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight,
    };
  },
  directives: {
    resize: {
      bind(el, binding) {
        const onResize = binding.value;
        window.addEventListener('resize', onResize);
        el._onResize = onResize;
      },
      unbind(el) {
        window.removeEventListener('resize', el._onResize);
      },
    },
  },
  methods: {
    onResize() {
      this.windowWidth = window.innerWidth;
      this.windowHeight = window.innerHeight;
    },
  },
};
</script>

解释：

1. 定义自定义指令：在 directives 中定义 resize 指令，bind 钩子中添加 resize 事件监听器，unbind 钩子中移除监听器。
2. 封装逻辑：将窗口大小变化的逻辑封装在指令中，使其可以在组件中复用。
3. 使用指令：在模板中使用 v-resize 指令，并绑定回调函数 onResize。

总结

在 Vue 中监听手机端页面大小，可以通过以下三种方法：

1. 使用 window 的 resize 事件：直接监听 resize 事件，实时获取窗口宽度和高度。
2. 使用 Vue 的生命周期钩子：利用 Vue 的 mounted 和 beforeDestroy 钩子管理事件监听器。
3. 使用 Vue 的指令：通过自定义指令封装监听逻辑，实现代码复用。

建议：在实际开发中，可以根据具体需求选择合适的方法。如果需要在多个组件中复用监听逻辑，推荐使用自定义指令。如果仅在单个组件中使用，直接在组件中监听 resize 事件即可。

相关问答FAQs：

1. 如何在Vue中监听手机端页面大小？

在Vue中，你可以使用@resize事件监听手机端页面的大小变化。以下是一个示例代码：

<template>
  <div>
    <p>当前页面宽度: {{ windowWidth }}px</p>
    <p>当前页面高度: {{ windowHeight }}px</p>
  </div>
</template>

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

这个示例中，我们使用window.innerWidth和window.innerHeight来获取当前页面的宽度和高度。在mounted钩子函数中，我们添加了一个resize事件监听器，当页面大小变化时，会触发handleResize方法更新页面的宽度和高度。

2. 如何根据手机端页面大小进行响应式布局？

在Vue中，你可以使用v-bind:class指令根据手机端页面大小进行响应式布局。以下是一个示例代码：

<template>
  <div :class="{ 'mobile-layout': isMobile }">
    <!-- 手机端布局 -->
    <div v-if="isMobile">
      <!-- 手机端内容 -->
    </div>
    <!-- 非手机端布局 -->
    <div v-else>
      <!-- 非手机端内容 -->
    </div>
  </div>
</template>

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

<style>
.mobile-layout {
  /* 手机端样式 */
}
</style>

在这个示例中，我们使用window.innerWidth来获取页面的宽度，并通过比较宽度与768的大小来判断是否为手机端。在模板中，我们使用v-if和v-else指令来根据isMobile的值决定显示手机端布局还是非手机端布局。

3. 如何在Vue中根据手机端页面大小加载不同的组件？

在Vue中，你可以使用v-if和v-else指令根据手机端页面大小加载不同的组件。以下是一个示例代码：

<template>
  <div>
    <div v-if="isMobile">
      <!-- 手机端组件 -->
      <mobile-component></mobile-component>
    </div>
    <div v-else>
      <!-- 非手机端组件 -->
      <desktop-component></desktop-component>
    </div>
  </div>
</template>

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

在这个示例中，我们使用window.innerWidth来获取页面的宽度，并通过比较宽度与768的大小来判断是否为手机端。在模板中，我们使用v-if和v-else指令来根据isMobile的值决定加载手机端组件还是非手机端组件。这样可以实现根据手机端页面大小加载不同的组件。