图片懒加载优化

懒加载指令的逻辑直接放到入口文件中不合理。main.js入口文件通常只做一些初始化的事情，不应该包含太多的逻辑代码，在这里通过插件的方法把懒加载指令封装为插件，main.js入口文件只需要负责注册插件。另外useIntersectionObserver对元素的监听是一直存在的，存在内存浪费。

一、封装自定义指令为插件

1.在directives文件夹下新建index.js文件，并写入以下代码；

// 引入vueuse中的懒加载
import { useIntersectionObserver } from '@vueuse/core'

export const directivePlugin = {
    install(app) {
        // 图片懒加载逻辑
        app.directive('img-lazy', {
            mounted(el, binding) {
                // el 表示使用指令的那个元素 在这里为img
                // binding:binding.value 指令等于号后边绑定的值 这里为图片的url地址
                console.log(el, binding.value);
                useIntersectionObserver(
                    // el 需要添加懒加载指令的元素 
                    el,
                    // isIntersecting 布尔值 实时告诉我们当前元素是否进入视口区域
                    ([{ isIntersecting }]) => {
                        if (isIntersecting) {
                            // 进入视口区域了
                            el.src = binding.value
                        }
                    },
                )
            }
        })
    }
}

2.在入口文件main.js中使用封装好的这个图片懒加载插件；

// 引入封装好的图片懒加载插件
import { directivePlugin } from './directives'

app.use(directivePlugin)

二、优化useIntersectionObserver对元素的监听

使用官网提供的stop方法控制，在元素第一次进入视口区域后就停止监听。