懒加载（指的就是，当用户通过滚动条，滚动到哪，哪的结构，才开始发ajax，拿数据，渲染）都是这个前提
    如何确定滚动到哪（）
    如何使用可以在vue.use网站上搜索useIntersectionObserver
    首先npm i @vueuse/core

    1. 然后创建一个js文件
    2. import { useIntersectionObserver } from '@vueuse/core'
    3. import { ref } from 'vue'
    4. export const useLazyData = (fn) => {
    5.   const target = ref(null)
    6.   const { stop } = useIntersectionObserver(target, ([{ isIntersecting }], observerElement) => {
    7.     if (isIntersecting) {
    8.       这个if判断的就是isIntersecting为true，就是滚动到了约定好的位置开始执行下一步，里面的发ajax了
    9.       //停止stop监控，这样，就能确保只有第一次的时候，滑动到图片的时候发ajax，下一次滑动到这个图片的时候
    10.       就不发ajax了，因为第一次已经发ajax获取到了数据
    11.       stop()
    12.       //是一个形参也就是发ajax的函数
    13.       fn()
    14.     }
    15.   },
    16.   { // 元素进入可见区域的比值（0-1）指的是滑动到这个元素的啥比例，就开始执行上面的代码操作（图片懒加载
    17.     就是滑动到当前这个图片这，在发ajax）这个也是起决定性的作用的   threshold：0 表示刚滚动到这个元素那就发
    18.     ajax获取数据（范围是0-1）
    19.     threshold: 0
    20.   })
    21.   return target
    22. }

    使用定义好的useLazyData这个函数在页面中

    1. import { useLazyData } from '@/compositions'
    2. export default {
    3.   name: 'HomeSpecial',
    4.   components: { HomePanel },
    5.   setup () {
    6.     const list = ref([])
    7.     //这里的fn就是发ajax请求数据的函数（效果也就是到滚动到这个id为target的元素的时候，在发ajax获取数据，起到了
    8.     懒加载的效果）
    9.     const fn = () => {
    10.       findSpecial().then(data => {
    11.         console.log(data, '000000000')
    12.         list.value = data.result
    13.       })
    14.     }
    15.     const target = useLazyData(fn)
    16.     return { list, target }
    17.   }
    18.   这个target的重要性，就是只要用了这个懒加载的函数 渲染这个ajax数据的模板的根元素就得设置一个ref
    19.   等于这个target，才能渲染上去，看下图
    1. <HomePanel title="最新专题" ref="target">
    2.     <template v-slot:right><XtxMore /></template>
    3.     <div class="special-list" ref="homeSpecial" v-if="list.length">
    4.       <div class="special-item" v-for="item in list" :key="item.id">
    5.         <RouterLink to="/">
    6.           <img :src="item.detailsUrl" alt />
    7.           <div class="meta">
    8.             <p class="title">
    9.               <span class="top ellipsis">{{item.title}}</span>
    10.               <span class="sub ellipsis">{{item.summary}}</span>
    11.             </p>
    12.             <span class="price">&yen;{{item.lowestPrice}}起</span>
    13.           </div>
    14.         </RouterLink>
    15.         <div class="foot">
    16.           <span class="like"><i class="iconfont icon-hart1"></i>100</span>
    17.           <span class="view"><i class="iconfont icon-see"></i>100</span>
    18.           <span class="reply"><i class="iconfont icon-message"></i>100</span>
    19.         </div>
    20.       </div>
    21.     </div>
    22.     <div v-else>
    23. <XtxSkeleton v-for="i in 3" :key="i" width="404px" height="288px" bg='#ccc'/>
    24.     </div>
    25.   </HomePanel>

    图片懒加载优化
    image.png