关于vue.js:Vueuse包提供的useIntersectionObserver-方法如何使用参数返回值

57次阅读

共计 1008 个字符，预计需要花费 3 分钟才能阅读完成。

 const {stop} = useIntersectionObserver(target, fn, options)

1、参数一 target 示意被监听的 DOM 元素

2、参数二是回调函数，用于告诉监听的动作（回调函数的第一个形参 isIntersecting 示意被监听的元素曾经进入了可视区）

3、参数三示意配置选项

stop 是进行察看是否进入或移出可视区域的行为

const {stop} = useIntersectionObserver(
target 是察看的指标 dom 容器，必须是 dom 容器，而且是 vue3.0 形式绑定的 dom 对象
 target,
 // isIntersecting 是否进入可视区域，true 是进入 false 是移出
 // observerElement 被察看的 dom
 ([{isIntersecting}], observerElement) => {// 在此处可依据 isIntersecting 来判断，而后做业务},
)

基于该办法实现组件的懒加载

第一步: 在 SRC 下封装一个钩子函数,src/hooks/index.js 文件夹下;
代码如下:

// 封装一个通用的办法实现数据的懒加载
import {useIntersectionObserver} from '@vueuse/core'
import {ref} from 'vue'

export const useLazyData = (apiFn) => {
  // target 示意组件的最外层 div 元素
  const target = ref(null)
  // 懒加载接口返回的数据
  const result = ref([])
  // 监听组件是否进入可视区
  const {stop} = useIntersectionObserver(target, ([{ isIntersecting}]) => {
    // 如果 target 对应的 DOM 进入可视区，那么该回调函数就触发
    if (isIntersecting) {
      // 被监听的 DOM 进入了可视区: 此时调用接口获取数据；进行持续监听
      stop()
      apiFn().then(data => {result.value = data.result})
    }
  })
  // result 示意接口懒加载获取的业务数据
  // target 示意被监听的 DOM 元素，须要在模板中被 ref 属性绑定
  return {result, target}
}

第二步: 在所须要的文件夹中导入
例如:

懒加载的益处:
页面加载速度快、能够加重服务器的压力、节约了流量, 用户体验好

正文完