npm run build
使用vue-cli创建的项目默认导入的是运行时版本并且是ESM模块化方式
核心： 把会改变数组的方法进行修补，当这些方法被调用的时候调用notify方法，遍历数组中的元素，把对象元素进行响应式处理
Watcher分为三类，Computed Watcher， 用户Watcher(监听器)，渲染Watcher
模板编译的主要目的是将模板转换为渲染函数
/src/lazy.js
定义变量接收实例化参数。
lazy.js 默认导出一个函数，该函数返回一个 Lazy 类，形成闭包，保持对 Vue 的引用。
判断是否支持Webp图片
/src/listener.js
定义变量接收实例化参数。
filter 方法将配置的 filter 对象中的方法执行，接收两个参数，一个为 ReactiveListener 实例，一个为 options 参数对象。
initState 方法给元素添加 data-set 属性，值为图片地址 src，并且定义了图片状态对象 state 。在 Lazy 中已经根据像素比选择了最适配屏幕的图片，顾这里不需要考虑 srcset 属性。另外，我们自定义指令是 v-lazy，到目前为止，还没有给图片的 src 属性赋值。
render 方法，是在 Lazy 中实例化 ReactiveListener 时传递过来的参数。
回过头再来结合 lazy.js 中的 lazyLoadHandler 方法与 ReactiveListener 暴露的方法来看。
/src/lazy-container.js
LazyContainer 的核心是 container 下的选择器selector(默认 img 标签)遍历后调用 lazy 的 add 方法进行绑定，自定义指令 v-lazyload-container。
/src/lazy-component.js
上述实现元素绑定主要是通过自定义指令 v-lazy ， v-lazy-container 。那么 LazyComponent 则是通过注册的 lazy-component 组件，完成绑定，默认渲染成为 div 标签，作为 img 的容器。
/src/lazy-image.js
通 LazyComponent 组件，只不过 LazyImage 注册的 lazy-image 组件，渲染成的是 img 标签，多了 src 属性。
通过自定义指令 v-lazy 将设置背景图的元素或者 img元素，通过 _addListenerTarget 方法收集与数组 TargetQueue 中，并遍历触发懒加载的方法， addEventListener 绑定在该元素上，触发的事件为 lazyLoadHandler ；
在需要懒加载的元素上设置属性 data-src ，这是期望的图片地址(filter 配置项可以预先过滤赋值)，元素上自定义 lazyLoad 表示图片状态(状态变更后，adapter 中触发回调)；
ListenerQueue 数组中收集的是 ReactiveListener 类的实例，主要是用于懒加载不同状态下的图片加载，loading - loaded - error；
当触发 EventListener 了，执行 lazyLoadHandler 方法，根据算法，进入 viewport 后， ReactiveListener 元素如果与触发元素匹配，则进行图片的加载及渲染。
