vue实现图片懒加载（图片加载过多导致页面白屏加载缓慢）

在一次活动中后端返回的图片和信息过于多，在没有配置懒加载时上线以后导致页面加载白屏点击无反应等问题，经过查询发现vue插件 vue-lazyload 是一个用来实现图片懒加载的好插件，于是实验开始
1，安装插件
npm install vue-lazyload --save-dev
2，在main.js中引入（也可以单页面引入）

import VueLazyLoad from 'vue-lazyload'; // 导入懒加载
Vue.use(VueLazyLoad,{
	error:'../static/img/beg.jpg', // 加载错误时的图片
	loading:'../static/img/loading.gif' // 加载时的时图片
});

3,template中写入

<li
  v-for="item in hot"
 :key="item.goods_id"
 @click="nav(item)"
 >
 <img
  class="img"
  v-lazy="item.goods_img" // 懒加载图片
 :key="item.goods_img"  // 坑
  >
  </li>

具体这个坑是 如设置了翻页功能，且每一页都是请求的数据进行渲染。
会发现其他的数据都变了，唯独图片还是原来的图片。
由于使用的数据是父组件传过来的，第一个想到父组件axios异步请求的数据导致子组件可能数据没有动态更新。但监听了下数据，发现确实是改变了 .
解决办法只要加个key就行,
至此图片懒加载就实现完毕