Vue3 使用 Hook 实现数据懒加载

安装 vueuse

npm i @vueuse/core -S

官方文档

useIntersectionObserver | VueUse

template

<section
    class="p-2 font-medium"
    ref="target">
    要懒加载的 DOM 元素
</section>

script

<script setup>
import { ref } from "vue"
import { useIntersectionObserver } from "@vueuse/core"

const target = ref(null)
const targetIsVisiable = ref(false)

const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }], observerElement) => {
    // 如果进入可视区域
    if (isIntersecting) {
      console.log("target is visible");
      console.log(observerElement);
      stop() // 只需懒加载一次
      // axios()
      // fn()
    }
    targetIsVisiable.value = isIntersecting
    console.log(targetIsVisiable.value);
  }
)
</script>