＜ vueUse工具集：初识 vueUse 和 useIntersectionObserver 响应式监听目标元素的可见性，实现组件异步加载＞

文章目录

💬 前言
👉 ① `useIntersectionObserver` 简介
👉 ② 范例一：元素
👉 ③ 范例二：组件
总结
📃 参考文献
往期内容 💨

💬 前言

这些天小温通过互联网自学呢, 发现了个挺有用的 Vue 实用的工具集。它包含了各种各有的 Vue一些常用 函数 / 组件，并对其进行封装。而且用法也更简单了，国内也有对应的中文文档（吐槽：就是解释性文字比较少，但是胜在有案例，配合案例去使用，也不算难理解！）。

在这里插入图片描述

最重要的是，兼容 Vue2 和 Vue3，支持 Typescript。配合使用，能达到很好的效果！

vueUse - 中文文档网址：https://www.vueusejs.com/
vueUse - github地址： https://github.com/vueuse/vueuse
入门安装： https://www.vueusejs.com/guide/

接下来，就是今天这篇文章要讲的知识点啦！ useIntersectionObserver 响应式监听目标元素的可见性，我们可以通过这个函数，监听我们给定目标元素在页面中的可见性。

通过配合 v-if指令，实现组件的异步加载。同时由于引用的组件是异步加载，会导致在打包的时候，被引用的组件会单独被打包成一个文件。

最终目的都是提高页面性能，常用于 “ 首屏加载 ”，当首屏加载内容过多时，可以将处在屏幕可视范围外的组件内容隐藏。通过 useIntersectionObserver 监听这些组件相对可视窗口的可见性，异步加载这些组件，减少首屏加载的性能损耗！避免首次加载时间过长！

👉 ① `useIntersectionObserver` 简介

响应式监听目标元素的可见性，通过指定对应目标元素（组件），监听对应元素在可视窗口的可见性，函数返回一个布尔值。

👉 ② 范例一：元素

<div ref="target">
  <h1>Hello world</h1>
</div>

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

export default {
  setup() {
    const target = ref(null)
    const targetIsVisible = ref(false)

    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        targetIsVisible.value = isIntersecting
      },
    )

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

当且仅当元素 target 出现在指定窗口中时，useIntersectionObserver函数的第二个参数触发callBack方法，返回一个参数集（含我们需要用到的 isIntersecting ），取出 isIntersecting 参数，它代表目标元素是否可见，通过一个布尔值来表示可见性！

👉 ③ 范例二：组件

<template>
	<div ref='target'>
		<C v-if='targetIsVisible'></C>
	</div>
</template>


<script setup>
import { defineAsyncComponent } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

// 以异步的方式引用组件
const C = defineAsyncComponent(() => import('../components/C.vue'))

const target = ref(null);
const targetIsVisible = ref(false);

const { stop } = useIntersectionObserver(
	target,
	([[ isIntersecting }]) => {
		// 当可见时，isIntersecting 为 true，添加判断，仅渲染一次
		if( isIntersecting ) {
			targetIsVisible.value = isIntersecting
		}
	},
)
</script>

通过 vue 自带的函数 defineAsyncComponent ，将组件进行异步引入。该函数引用的组件，在未使用时，是不会被加载的，只有当这个组件被使用时，才会进行加载。同时，这个组件在打包时，会被单独打包成一个独立的文件，从而降低加载时，性能的损耗！

总结

总得来说，vueUse这款基于 Vue 开发的工具集合库非常值得小伙伴们去学习和了解一下的。它涵盖了很多日常使用中，可能需要人为封装一下才能使用的各种各样的API。如：鼠标监听、元素监听、浏览器相关的监听事件、CSS动画相关、网络相关、监听电脑响应传感器之类的。只能说，涵盖了日常开发中，可能用到的大部分开发事件。