vue自定义指令进行 接口 页面滚动懒加载

需求：多个模块在一个页面的数据看板，一次性请求多个接口，会造成页面卡断，有的接口运行缓慢，甚至出现canceled的情况

解决思路：前端进行接口滚动，自定义指令进行接口懒加载（模仿懒加载图片），滚动页面，当需要展示的页面出现在可见视图中，才进行接口加载

 <div ref="businessTab" id="模块id1" v-lazy-load="lazyMethod"></div>
 <div ref="businessTab" id="模块id2" v-lazy-load="lazyMethod"></div>
 <div ref="businessTab" id="模块id3" v-lazy-load="lazyMethod"></div>
 .....

import Vue from 'vue'
  Vue.directive("lazyLoad", {
    bind: function(el, binding,vnode) {
      let lazyImageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach((entry, index) => {
          let lazyImage = entry.target;
          // 相交率，默认是相对于浏览器视窗
          if (entry.isIntersecting){
            if (lazyImage.id==="模块id1") { 
           // 在自定义指令中 用 vnode.context.方法名（）  来 访问methods中的方法
              vnode.context.方法名字1()
              vnode.context.方法名字2()
            }else if (lazyImage.id==="模块id2") {
              vnode.context.方法名字1()
              vnode.context.方法名字2()
            } else  if (lazyImage.id==="模块id3"){
              vnode.context.方法名字1()
              vnode.context.方法名字2()
            }

          }

        })
      })
      lazyImageObserver.observe(el);
    },
  });

  lazyMethod() {

  },