Vue 监听屏幕尺寸，轻松获取高度

在现代网页开发中，响应式设计是必不可少的。随着设备和屏幕尺寸的多样化，确保你的网站能够在任何设备上看起来都很棒非常重要。Vue.js 是一个流行的 JavaScript 框架，它提供了许多帮助你构建响应式网站的工具。

Vue 中获取屏幕高度的方法有很多。最简单的方法之一是使用 JavaScript API。你可以使用 window.innerHeight 属性来获取视窗的高度。视窗是指浏览器窗口中可见的部分，不包括浏览器工具栏和地址栏。

const viewportHeight = window.innerHeight;

你也可以使用 document.documentElement.clientHeight 属性来获取整个页面的高度。页面高度包括视窗和滚动条。

const pageHeight = document.documentElement.clientHeight;

Vue 还提供了一些响应式 API，可以让你轻松地获取屏幕高度。你可以使用 $el.clientHeight 属性来获取组件元素的高度。

const componentHeight = this.$el.clientHeight;

你也可以使用 root.el.clientHeight 属性来获取整个应用程序根元素的高度。

const appHeight = this.$root.$el.clientHeight;

除了使用 JavaScript API 和 Vue 响应式 API 之外，你还可以结合 Vue 的生命周期钩子来获取屏幕高度。例如，你可以在 mounted 钩子中获取屏幕高度。

export default {
  mounted() {
    const viewportHeight = window.innerHeight;
    console.log(viewportHeight);
  }
}

你还可以使用 watch 选项来监听屏幕高度的变化。

export default {
  data() {
    return {
      viewportHeight: window.innerHeight
    }
  },
  watch: {
    viewportHeight(newViewportHeight, oldViewportHeight) {
      console.log(`Viewport height changed from ${oldViewportHeight} to ${newViewportHeight}`);
    }
  }
}

通过监听屏幕高度的变化，你可以触发事件来响应屏幕高度的变化。例如，你可以创建一个滚动事件来在用户滚动页面时触发。

export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const scrollTop = window.scrollY;
      const pageHeight = document.documentElement.clientHeight;
      if (scrollTop + pageHeight >= document.documentElement.scrollHeight) {
        console.log('You have reached the bottom of the page!');
      }
    }
  }
}

希望这些方法对你有帮助！