vue渲染完之后触发_vue v-for循环渲染完毕在加载事件

在做项目时，我们经常要用到for循环渲染dom，常用到的主要时一些for循环的图片

然而jv-for循环是有时就需要做些等待for循环渲染后在执行的事件，例如(项目中用到的滑动组件，图片加载完后要重定向，或者是一些需要等待渲染完后才触发的事件)

解决方法一

主要是用到vue中的 watch + vm.nextTick

watch是 监听某一个data数据发生变化就执行方法

nextTich: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

下面是例子代码

不过有时还有一种情况就是

wathc监听数组的变化，用nextTick触发事件，正常来讲是for循环渲染后只触发一次nextTick事件。然而本人试过在使用微信js-sdk做微信打开相册上传图片功能时，需要等他选择完图片渲染完在做别的操作

本人当时就用到了wathc+nextTick，发现一个问题就是for中每次加一个数据就触发一次nextTick，(就是例如for添加了2个数据，就触发两次nextTick)，不是本人要求的那个，需求应该时渲染完后只触发一次

nextTick，也就时等最后一个数据渲染完成后触发，，(主要是他触发了多次wathc，造成多个nextTick事件)

这时就要用到 setInterval 定时器 设置了，

代码是

Title

{{ item }}

vm = new Vue({

el:'.app',

data: {

arr: [],

imgSetInterval:null,

},

wathc:{

arr: function() {

clearInterval(this.imgSetInterval)

this.$nextTick(function(){

this.imgSetInterval=setInterval(function () {

console.log('img定时器')

clearInterval(that.imgSetInterval)

},1000)

})

}

},

mounted:function() {

var that = this;

axios.get('url',{

params:{

link: '',

}

}).then(function(res){

that.arr = res;

})

}

})

上面是针对vue的v-for循环渲染完毕在加载事件，本人觉得是比较好的解决办法

还有一种是js的定期器

使用setTimeout中的事件差来解决，不过本人不推荐，主要是有个时间的不确定性，(不知道v-for循环渲染完毕的时间，不同设备的时间也是不一样的)