一、VueUse是什么

VueUse不是Vue.use，它是为Vue 2和3服务的一套Vue Composition API的常用工具集，
是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支持响应式的JS API
变得支持响应式，省去程序员自己写相关代码。

二、安装

npm i @vueuse/core

三、引入

import {useWindowScroll} from "@vueuse/core";

四、使用过的记录一下

1. useWindowScroll --- 实现可视屏幕的滚动距离
    import {useWindowScroll} from "@vueuse/core";
    // y是ref响应式
    const {y} = useWindowScroll();
    
2. useIntersectionObserver --- 实现组件数据懒加载
   * 自定义useLazyData.js Hooks
        import {ref} from "vue";
        import {useIntersectionObserver} from "@vueuse/core";

        export function useLazyDate(apiFn) {
            // 1.创建对象元素
            const target = ref(null);
            // 2.存储数据
            const result = ref(null);
            // 3.监听元素进入可视区
            // 第一个参数：ref引用，获取DOM
            // 第二个参数：回调，回调里面的参数 isIntersecting 会在参数一获取的 DOM 元素进入可视区域的时候监听并且为 true
            // 第三个参数：DOM 元素进入可视区域的距离 从 0 - 1
            const {stop} = useIntersectionObserver(
                target,
                ([{isIntersecting}]) => {
                    console.log("懒加载", isIntersecting);
                    if (isIntersecting) {
                        // 停止监听懒加载
                        stop();
                        // 调用API 获取数据
                        apiFn().then((res) => {
                            // console.log("layData:", res); //@log
                            result.value = res.result;
                        });
                    }
                },
                {threshold: 0}
            );
            // 返回两个值 result 返回的是调用接口返回的后台的数据
            // target 用来实现 ref 引用
            return {target, result};
        }
  * apiFn(api/home.js)
        export function getProducts() {
          return request("/home/goods",'get');
        }
  
  * 在vue文件中使用      
        <script setup>
        import {useLazyDate} from "@/hooks/useLazyDate";
        import { getProducts } from "@/api/home";
        
        // { result: products } 变量重命名
        const { target, result: products } = useLazyDate(getProducts);
        </script>

        <template>
          <div class="lazy-page" v-for="item in products" ref="target"></div>
        </template>