vue-lazyload解决了什么问题？
可以想象一个网页打开有成百上千的图片需要加载，页面会变得非常的卡顿，此时如果只是可视区域的图片加载，其他的图片可以暂时有一个占位loading图，等滚动它们到可视区域时再去请求真实图片并且替换就好了。很好，vue-lazyload插件就是解决此类问题的，对vue插件的写法不熟悉的可以先看一下vue插件
vue-lazyload设计简析
解析之前可以先思考一下如果自己写一个图片懒加载的工具，会如何实现呢？首先最明显的是需要一个检查图片dom元素是否在浏览器可视区域内的方法checkInView，然后需要给所有图片的滚动父元素绑定一个滚动事件的监听方法scrollHandler，所以大概的思路图为：
其实上图就已经实现了一个最最基本的图片懒加载的思路了，稍加修饰就可以写出可运行的代码。
接下来带着这个基本思路来看vue-layload的实现.
src/index.js
可以看到提供了两种指令使用方式和两种组件使用方式，我主要分析v-lazy的指令在vue2版本的实现，其他的可以自行分析，原理相通。
可以看出来通过Lazy和LazyClass得到了lazy这个对象，v-lazy指令对应的几个回调函数：bind、update、componentUpdated和unbind分别绑定的是lazy对象的add、update、lazyLoadHandler和remove方法。
接下来看lazy对象是如何生成的：
src/lazy.js
可以看到lazy.js文件导出了一个方法，该方法又返回了一个Lazy类，这么写的
原因是为了形成闭包来继续在Lazy类中引用Vue。下面看Lazy类的构造函数：
可以看到构造函数里面初始化了一大堆的配置和变量，一个函数lazyLoadHandler以及setMode来判断是否使用observer来检测dom可见（IntersectionObserver）
顺着刚刚src/index.js的思路继续往下看指令bind回调函数发生了什么：
src/lazy.js
可以看到对于每个添加了v-lazy指令的dom元素，都会先找到它的scrollParent元素（其实就是一直向上遍历到它overflow=auto或scroll的祖先元素）；然后会生成一个newListener对象，并且把newListener加到ListenerQueue数组中；最后调用_addListenerTarget方法。
接着看_addListenerTarget方法发生了什么：
src/lazy.js
可以看到将scrollParent元素放入了TargetQueue，并且调用了_initListen方法
继续看_initListen方法：
src/lazy.js
可以看到给scrollParent监听了this.options.ListenEvents里面的所有事件，事件回调函数为lazyLoadHandler。
在前面已经说过了lazyLoadHandler的初始化：
src/lazy.js
lazyLoadHandler方法就是_lazyLoadHandler加了一个节流包装后返回的函数。
继续看_lazyLoadHandler的实现：
src/lazy.js
可以看到_lazyLoadHandler方法里是遍历了ListenerQueue数组，并且调用每个listener的checkInView，如果checkInView返回true则调用listener.load；此时其实可以猜到checkInView是在检查该listener对应的dom元素是否在可视区域内，listener.load方法是在请求真正的image。
所以梳理一下，vue-lazyload的简要设计思想可以如图所示
