简单实现组件数据懒加载

VueUse 组件数据懒加载

1. 理解

本节目标: 从实际角度理解组件数据懒加载指的是什么
思考俩个问题

1. 我们一般的数据请求在哪里发起？
2. 生命周期钩子函数的特点是什么？

我们现在每个组件中发起ajax请求一般都是在created钩子函数或者mounted钩子函数中发起的，生命周期有一个特点：跟着组件的初始化过程走自动执行，开发者无法控制，所以我们现在首页中的人气推荐/新鲜好物等模块中的请求一旦组件渲染ajax请求就会发起，而电商类的首页页面一般会很长，有的模块组件甚至都不会出现在视口中，这样无脑的加载数据，显然是不合理的存在浪费，为了解决这个问题，我们引入了组件数组懒加载

结论（何为组件数据懒加载？）

只有组件正式进入到视口中时，才把组件内部的ajax请求发起，否则不请求数据

2. 如何实现

本节目标: 了解如何通过技术手段得知组件进入了视口

技术方案：

我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听组件进入可视区域行为，需要配合vue3.0的组合API的方式才能实现
useIntersectionObserver 链接地址

1. 下载VueUse插件

yarn add @vueuse/core

2. 使用useIntersectionObserver插件中的方法

import { useIntersectionObserver } from '@vueuse/core'

3. 先分析下这个useIntersectionObserver 函数：

const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }], observerElement) => {
    targetIsVisible.value = isIntersecting
  },
)
/*
  1.stop 一个可执行的函数用来停止监听行为
  2.target 一个由ref api调用之后形成的RefImpl对象 也可以是一个dom对象
  3.isIntersecting 一个类型为布尔值的数据 当被监听元素进入视口区域时为true,离开视口区域时为false
*/

4. 我们以某模块为例演示一下这个函数的使用方式

HomePanel是一个组件，使用时候替换成自己的组件即可

<HomePanel 
  ref="target" 
></HomePanel>

<script>
export default {
  name: 'HomeHot',
  components: { HomePanel },
  setup () {
  	// 存放数据的数组
    const list = ref([])
    // 请求数据函数
    const getList = () => {
      const res = await findHot()
      list.value = res.data.result
    }
    // 获取的DOM节点
    const target = ref(null)
     // stop 是一个可执行的方法 调用就会停止监听
    // 不管元素进入还是离开视口区域都不会再执行回调函数
    // 注意：不会只监听一次  只有进入视口或者离开视口回调函数都会执行
    const { stop } = useIntersectionObserver(
      // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
      target,
      // isIntersecting 是否进入可视区域，true是进入 false是移出
      // observerElement 被观察的dom
      ([{ isIntersecting }], observerElement) => {
        // 在此处可根据isIntersecting来判断，然后做业务
        if (isIntersecting) {
          // 停止监听防止重复调用接口
          stop()
          console.log('正式发起接口请求')
          getList()
        }
      }
    )
    return {
      target,
      goodsRef
    }
}
</script>

3.封装成能够实现基本业务逻辑复用的函数

封装成函数

// 引入useIntersectionObserver
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

export const useObserver = apiFn => {
  // 获取的DOM节点
  const target = ref(null)
  // stop 是一个可执行的方法 调用就会停止监听
  // 不管元素进入还是离开视口区域都不会再执行回调函数
  // 注意：不会只监听一次  只有进入视口或者离开视口回调函数都会执行
  const { stop } = useIntersectionObserver(
    //  // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
    target,
    ([{ isIntersecting }], observerElement) => {
      /**
       *  isIntersecting 是否进入可视区域，true是进入 false是移出
       *  observerElement 被观察的dom
       *  在此处可根据isIntersecting来判断，然后做业务
       */
      if (isIntersecting) {
        // 在这里发起Axios请求
        apiFn()
        // 停止监听防止重复调用接口
        stop()
      }
    }
  )

  return target
}

检测函数效果

<HomePanel 
  ref="target" 
></HomePanel>

<script>
// 引入函数
import { useObserver } from '@/compositions'

export default {
  name: 'HomeHot',
  components: { HomePanel },
  setup () {
  	// 存放数据的数组
    const list = ref([])
    // 请求数据函数
    const getList = () => {
      const res = await findHot()
      list.value = res.data.result
    }
    // 调用函数返回值 是获取的Dom节点  上面要用所以要return出去
    const target = useObserver(getNewGoods)

    return {
      goods,
      target
    }
  }
}
</script>

上述代码基于原始的封装函数，能满足大多处业务逻辑实现