expression：字符串形式的指令表达式。例如 v-my-directive=”1 + 1″ 中，表达式为 “1 + 1″。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
参考链接：https://cn.vuejs.org/v2/guide/custom-directive.html
Vue图片懒加载插件实现
思路：事先提供俩个空数组listenList（收集未加载的图片元素和资源）和imageCacheList（收集已加载的图片资源）。然后，判断图片是否到达可视区，如果到达，则用Image对象去加载资源图片，加载完毕后赋值给绑定元素的src让其显示。同时，将加载过的资源放入imageCacheList数组，用isAlredyLoad方法做个判断，防止之后相同的资源重复加载。如果没到达，则将元素和资源对象放到listenList数组，最后进行滚动监听。监听listenList数组中的元素是否可以加载资源。
插件的实现：
// 引入Vue构造函数
import Vue from 'vue'var lazyload = {
// Vue.use() 默认加载install,并且将Vue当做第一个参数传递过来
install(vue,payload) {
// 数组扩展移除元素
if(!Array.prototype.remove){
Array.prototype.remove = function(item){
if(!this.length) return
var index = this.indexOf(item);
if( index > -1){
this.splice(index,1);
return this
}
}
}
// 默认值图片
var defaultImage = payload.defaultImage || 'https://www.easck.com/d/file/200614/20200614060017857.jpg';
var errorImage = payload.errorImage || 'https://www.easck.com/d/file/200614/20200614060017857.jpg';
// 默认离可视区10px时加载图片
var distanece = payload.scrollDistance || 10;
// 收集未加载的图片元素和资源
var listenList = [];
// 收集已加载的图片元素和资源
var imageCacheList = [];
// 是否已经加载完成的图片
const isAlredyLoad = (imageSrc) => {
if(imageCacheList.indexOf(imageSrc) > -1){
return true;
}else{
return false;
}
}
//检测图片是否可以加载，如果可以则进行加载
const isCanShow = (item) =>{
var ele = item.ele;
var src = item.src;
//图片距离页面顶部的距离
var top = ele.getBoundingClientRect().top;
//页面可视区域的高度
var windowHeight = window.innerHight;
// top - distance 距离可视区域还有distance像素
if(top - distanece < window.innerHeight){
var image = new Image();
image.src = src;
image.onload = function() {
ele.src = src;
