vue3中全局自定义指令---图片懒加载

实际懒加载代码如下实例

import { useIntersectionObserver } from '@vueuse/core'

// 定义懒加载插件
export const lazyPlugin = {
    install(app){
        //懒加载指令逻辑
        app.directive('img-lazy', {
            mounted(el, binding) {
                const {stop} = useIntersectionObserver(
                    el,
                    ([{ isIntersecting }]) => {
                        // console.log(isIntersecting);
                        if (isIntersecting) {
                            //进入视口区域
                            el.src = binding.value
                            stop()
                        }
                    },
                )
            }
        })
    }
}

代码解析如下： 

 一，

 VueUse 是一个基于 Vue 3 的插件库，提供了一组常用的 Vue 3 Composition API 钩子函数和工具函数，用于增强 Vue 3 的开发体验和功能。

VueUse 提供了大量的功能性钩子函数和工具函数，包括但不限于：

1. useLocalStorage：用于在 Vue 组件中方便地使用 localStorage。

2. useClipboard：用于在 Vue 组件中方便地操作剪贴板。

3. useMouse：用于获取鼠标事件信息的钩子函数。

4. useDebounce 和 useThrottle：用于创建防抖和节流的函数。

5. useIntersectionObserver：用于观察元素是否进入视口的钩子函数。

6. useFetch：用于发起 HTTP 请求的钩子函数。

 使用useIntersectionObserver来完成监视视口的变化，代码如下 实例1

地址如下useIntersectionObserver | VueUse

import { useIntersectionObserver } from '@vueuse/core'

二， 

install 方法是 Vue 3 插件的一个必需方法，它用于安装插件并在应用中进行初始化。当我们使用 app.use 安装插件时，Vue 3 会自动调用插件对象上的 install 方法。

具体来说，install 方法接收一个 app 参数，该参数是一个 Vue 3 应用的实例。通过在 install 方法中执行相关逻辑，我们可以将插件的功能添加到 Vue 3 应用中。

在上述代码中，install 方法被定义在 lazyPlugin 对象中，并且作为一个 Vue 3 插件。当我们通过 app.use(lazyPlugin) 安装这个插件时，Vue 3 会自动调用 lazyPlugin.install(app)，并将应用实例作为参数传递给 install 方法。

在 install 方法中，我们可以执行以下操作：

1. 注册全局组件：通过 app.component 方法注册全局组件，使其在整个应用中可用。

2. 注册全局指令：通过 app.directive 方法注册全局指令，以扩展元素的行为和功能。

3. 添加实例属性或方法：通过 app.config.globalProperties 添加一些方法或属性到应用实例，使其在所有组件中可用。

4. 执行其他初始化逻辑：例如设置默认配置、绑定全局事件等。

 install(app){

-----
}

三，

全局自定义指令第一个为全局指令的名字，第二个为一个对象的形式。

 app.directive('img-lazy', {})

四，

在这段代码中，mounted 钩子函数的两个参数分别是：

1. el：指令所绑定的 DOM 元素。在这里，el 就是指令绑定的图片元素。

2. binding：一个对象，包含指令的各种信息，例如指令的名字、值、修饰符等。在这里，binding.value 表示指令等号后面的表达式，即图片的 URL 地址。

这里需要注意的是，在 Vue 3 中，指令的钩子函数中没有了 vnode 参数，因为这个参数在 Vue 3 中已经被合并到了 binding 对象中。因此，在 Vue 3 中，我们可以直接通过 binding 对象访问指令相关的信息。

总之，mounted 钩子函数的两个参数分别代表指令所绑定的 DOM 元素和指令的相关信息，我们可以通过它们来操作 DOM 元素或获取指令的信息。

   mounted(el, binding) {}

 五，

 

这段代码使用了 Vue 3 生态中的库 @vueuse/core 中的 useIntersectionObserver 钩子函数，它是一个用于监听元素可视区域状态的函数。该函数接收两个参数：需要监听的 DOM 元素和回调函数。

具体解析如下：

1. const { stop } = useIntersectionObserver(el, callback)：这行代码定义了一个 stop 常量，它是通过解构赋值的方式从 useIntersectionObserver 函数返回的对象中获取的。该函数接收两个参数：需要监听的 DOM 元素和回调函数。在这里，el 是指令所绑定的图片元素，callback 是一个箭头函数。

2. ([ { isIntersecting } ]) => { ... }：这是回调函数的参数列表，通过解构赋值的方式获取到 isIntersecting 属性。isIntersecting 表示元素是否进入视口区域，即是否可见。

3. 在回调函数中，首先判断 isIntersecting 的值，如果为 true 表示元素已经进入视口区域，然后将图片元素的 src 属性设置为 binding.value，即指令等号后面绑定的表达式，即图片的 URL，实现图片懒加载。之后调用 stop() 函数停止对元素的监听。

总之，这段代码利用 useIntersectionObserver 钩子函数监听图片元素的可视区域状态，当图片元素进入视口区域时，将图片的 src 属性设置为指定的 URL，并停止对元素的监听，实现图片的懒加载。这段代码是在 Vue 3 插件中定义的，用于全局注册图片懒加载指令。

 const {stop} = useIntersectionObserver(
                    el,
                    ([{ isIntersecting }]) => {
                        // console.log(isIntersecting);
                        if (isIntersecting) {
                            //进入视口区域
                            el.src = binding.value
                            stop()
                        }
                    },