vue使用自定义指令实现懒加载

在项目中如果有大量的图片需要加载的时候，就可以考虑使用懒加载了，懒加载其实就是监听浏览器的滚动，当滚动到一定的范围的时候就将图片的真实路径赋给src,然后取消监听。
实现的方法也比较简单，可以通过懒加载的插件实现，也可以手写，手写通过vue自定义指令来实现，一般情况自定义指令用的也不多，比较vue自带的就够用了，大型复杂的项目的可能用的多。
1、vue的自定义指令，顾名思义就是自己定义一个指令类似于v-for、v-if这种，实现指定的功能，使用和原有指令一样，又分为全局指令，局部指令。

全局指令

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部指令

data(){
  return {
    }
}
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  },
methods:{
}

2、vue的自定义指令有三个钩子函数（类似于生命周期）bind（只调用一次，指令第一次绑定到元素时调用，初始化调用）、inserted（被绑定元素插入父节点时调用）、update（所在组件的 VNode（虚拟dom） 更新时调用）、componentUpdated（指令所在组件的 VNode 及其子 VNode 全部更新后调用）、
unbind（只调用一次，指令与元素解绑时调用。）
3、钩子函数会被传入以下参数：el（当前dom元素）、binding（一个对象，包含绑定的值value和name等）
4、实现懒加载，先注册一个局部指令v-lazy，在inserted钩子函数中监听滚动，当当前元素的offsetTop小于屏幕的高度加上滚动的高度时将真实的图片路径给src>

directives:{
    lazy:{
      inserted(el,binding){
          function fun(){
               let H=window.innerHeight;
               let st=document.body.scrollTop||document.documentElement.scrollTop;
               if(el.offsetTop<=H+st+200){
                   el.src=binding.value;
                   window.removeEventListener("scroll",fun);//解决资源再次请求
               }
           }
           fun();
           window.addEventListener("scroll",fun)
      }
    }
  },