vue3的组件数据懒加载

vue3的组件数据懒加载

使用场景: 如果页面过长,位于可视窗口之外的组件,用户可能根本没有机会看到,这类组件没有必要一上来就加载(网络层面的优化,只有进入视口才会获取数据)

基础思路: 监听组件是否已经进入到可视区域,只有进入可视区域才正式发起ajax请求(不再由声明周期钩子函数决定)

技术实现: 

       1. 如何知道组件进入可视区域   useIntersectionObserver() 

       2. 在达到条件之后,发送ajax请求

       3. 在首次数据加载后立刻停止监听

注意点:

       1. target  ref对象

       2. 正常情况下,每次进入可视区域移出可视区域都会再次回调

       3. 正常逻辑下,不应该执行多次,可以使用stop在执行了首次加载后,停止加载

// 封装监听目标元素进入视口的通用逻辑
import { ref } from 'vue'
// 引入监听api的方法
import { useIntersectionObserver } from '@vueuse/core'

export function useObserver(apiFn){
  // 监听的目标对象
  const target = ref (null)
  // stop 是一个可执行的方法,调用就会停止监听
  // 不管元素进入还是离开视口区域都不会在执行回调函数
  // 注意: 不会只监听一次,只有进入视口或者离开视口回调函数都会执行
  const { stop } from useIntersectionObserver(
    // 监听目标元素
    target,
    // isIntersecting 布尔值 代表当