如何在 VueUse 中使用 height 相关功能？

在 Vue.js 开发中，VueUse 是一个非常实用的工具库，它提供了许多有用的函数和组合式函数，方便开发者处理各种常见的任务，与高度（height）相关的功能在很多场景下都能发挥重要作用，下面我们就来详细了解一下如何在 VueUse 中使用 height 相关功能。

获取元素高度

在 VueUse 中，我们可以使用 useElementSize 这个组合式函数来获取元素的高度。

import { ref, onMounted } from 'vue';
import { useElementSize } from '@vueuse/core';
export default {
  setup() {
    const element = ref(null);
    const { height } = useElementSize(element);
    onMounted(() => {
      console.log('元素高度：', height.value);
    });
    return {
      element
    };
  }
};

在上面的代码中,我们首先通过 ref 创建了一个 element 引用，然后使用 useElementSize 函数传入这个引用，它会返回一个包含 height 等属性的对象，在 onMounted 钩子中，我们就可以获取到元素的高度值了，这在我们需要根据元素实际高度来进行一些布局调整或者逻辑处理时非常有用，当一个图片加载完成后，我们想知道它在页面中实际占据的高度，就可以利用这个方法。

监听高度变化

我们不仅要获取元素的初始高度,还需要监听高度的变化，VueUse 同样提供了相应的方法。

import { ref, onMounted } from 'vue';
import { useElementSize } from '@vueuse/core';
export default {
  setup() {
    const element = ref(null);
    const { height } = useElementSize(element);
    onMounted(() => {
      height.value; // 初始高度
      height.$watch((newValue) => {
        console.log('高度变化了，新高度：', newValue);
      });
    });
    return {
      element
    };
  }
};

通过 $watch 方法，我们可以监听 height 的变化，当元素的高度因为内容的改变（比如文本增多、图片尺寸变化等）或者窗口大小调整等原因发生变化时，这个回调函数就会被触发，这对于实现一些动态的效果很有帮助，例如一个可伸缩的侧边栏，当用户调整窗口大小时，侧边栏的高度要随之变化并做出相应的动画效果，我们就可以利用这个监听功能来实现。

处理视口高度

除了元素的高度,视口（viewport）的高度在网页开发中也经常需要关注，VueUse 中的 useWindowSize 可以帮助我们获取视口的高度。

import { ref, onMounted } from 'vue';
import { useWindowSize } from '@vueuse/core';
export default {
  setup() {
    const { height } = useWindowSize();
    onMounted(() => {
      console.log('视口高度：', height.value);
    });
    return {
      height
    };
  }
};

useWindowSize 会返回一个包含 width 和 height（分别表示视口的宽度和高度）的对象，在响应式布局中，我们可以根据视口高度来调整页面元素的显示方式，当视口高度较小时，将一些堆叠排列的元素改为垂直排列，以更好地适应屏幕空间，它也能监听视口高度的变化，和前面监听元素高度变化类似，我们可以通过 $watch 来实现。

import { ref, onMounted } from 'vue';
import { useWindowSize } from '@vueuse/core';
export default {
  setup() {
    const { height } = useWindowSize();
    onMounted(() => {
      height.$watch((newValue) => {
        console.log('视口高度变化了，新高度：', newValue);
      });
    });
    return {
      height
    };
  }
};

结合其他功能使用

在实际项目中,height 相关功能往往会和其他 VueUse 功能结合使用，我们可以结合 useIntersectionObserver 来实现当元素进入视口一定比例时，根据元素高度来执行一些动画。

import { ref, onMounted } from 'vue';
import { useElementSize, useIntersectionObserver } from '@vueuse/core';
export default {
  setup() {
    const element = ref(null);
    const { height } = useElementSize(element);
    const { isIntersecting } = useIntersectionObserver(element, {
      root: null,
      rootMargin: '0px',
      threshold: 0.5
    });
    onMounted(() => {
      isIntersecting.$watch((isVisible) => {
        if (isVisible) {
          // 这里可以根据 height.value 来执行动画，比如让元素从底部滑动进入，滑动的距离可以根据元素高度计算
          console.log('元素进入视口一半了，高度是：', height.value);
        }
      });
    });
    return {
      element
    };
  }
};

这样的组合使用可以创造出很多有趣且实用的交互效果。

注意事项

在使用 VueUse 的 height 相关功能时，有几点需要注意，确保元素已经正确挂载到 DOM 上，所以一般在 onMounted 钩子中获取和操作高度相关的值比较合适，对于动态添加或移除的元素，要注意引用的更新，避免获取到错误的高度值，不同浏览器对于一些元素高度的计算可能会有细微差别，在进行一些精确布局时需要进行测试和兼容性处理。

VueUse 中的 height 相关功能为我们在 Vue.js 开发中处理高度相关的问题提供了便捷的方式，无论是获取元素高度、监听高度变化还是结合其他功能实现复杂交互，都能通过简单的代码实现，合理运用这些功能，可以让我们的 Vue 应用更加灵活和用户友好，提升用户体验，希望以上内容能帮助你更好地在项目中使用 VueUse 的 height 相关功能。