详细讲一下VueUse(1-10)中我认为好用且常用的方法

本期是一个专栏，旨在帮助大家了解VueUse好用的方法，要是能利用好，开发的效率将会大大增加！！

1.useElementBounding - 获取元素的位置和尺寸信息

import { ref } from 'vue'
import { useElementBounding } from '@vueuse/core'

const el = ref(null)
const {
    x,      // 元素左边距离视口左边的距离
    y,      // 元素顶部距离视口顶部的距离
    top,    // 元素顶部距离文档顶部的距离
    right,  // 元素右边距离文档左边的距离
    bottom, // 元素底部距离文档顶部的距离
    left,   // 元素左边距离文档左边的距离
    width,  // 元素的宽度
    height  // 元素的高度
} = useElementBounding(el)

// 使用示例
const centerPoint = computed(() => ({
    x: x.value + width.value / 2,
    y: y.value + height.value / 2
}))

2.useScroll - 监听滚动位置

import { useScroll } from '@vueuse/core'

// 监听整个页面的滚动
const { x, y, isScrolling, arrivedState } = useScroll(window)

// arrivedState包含四个属性
const { 
    top,    // 是否滚动到顶部
    bottom, // 是否滚动到底部