图片懒加载指令

场景和指令用法：

电商网站的首页通常会很长，用户不一定能访问到页面靠下面的图片，这类图片通过懒加载优化手段可以做到只有进入视口区域才发送图片请求

 

 在vue官网中查看的

将一个自定义指令全局注册到应用层级（常见的做法）：

const app = createApp({})

//使v-focus在所有组件中都可用
app.directive('focus',{
   /*...*/
})

 只有当所需功能只能通过直接的 DOM 操作来实现时，才应该使用自定义指令。其他情况下应该尽可能地使用 v-bind 这样的内置指令来声明式地使用模板，这样更高效，也对服务端渲染更友好。

 isIntersecting:判断当前图片是否进入可视区域