<!-- 1.首先获取到接口数据并赋值在页面上,并给 img 添加 *ref* -->
<div class="box" v-for="(item,index) in dataList" :key="index">
	<img ref="imgRef" :src="item.url" >
</div>

var vm = new Vue({
	 el: '#app',
	 data: {	
		dataList:[],  //存放接口数据
		num:0  //存放加载成功的数量
	 },
	 methods:{
 	     getDataList() {
		      getList(this.listQuery)
		        .then(res => {
		          if (res.data && res.data.code === 200) {
		            this.dataList = res.data.data.list;
		          } else {
		            this.$message.error(res.data.msg);
		          }
		        })
		        .catch(res => {
		          this.$message.error(res.data.msg);
		        });
		  },
		 // 通过 complete 判断 img 是否渲染成功
		 imgLoad(img, callback) {
		   var _this = this;
		   var timer = setInterval(function() {
			 if (img.complete) {
			 	//渲染成功则 num +1
				_this.num++;
			    callback(img);
			    clearInterval(timer);
			 }
		   }, 50);
		}
	 },
	 watch:{
	      /*2.通过 watch 监听 dataList(存放接口数据的变量) 的数据变化*/ 
		 dataList(val){
		    this.$nextTick(function() {
				/* 3.通过ref获取到图片的DOM元素 */
			    let list = this.$refs.imgRef;
				//对获取到的图片元素进行遍历
			    for (let i in list) {
					/* 4.调用 imgLoad 方法对每一个图片进行判断 */
				   this.imgLoad(list[i], () => {
					    // 当变量 num 等于接口获取的数据的长度时，则代表图片都加载完成
						if (this.num == list.length - 1) {
							// 进行业务操作
							console.log("加载成功");
						}
					});
			   }
			})
		}
	 },
})

注意：
1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时想要拿到单个的ref 只需要循环就可以了。