vue列表渲染之后执行方法

Question

如图

• 上图为列表部分，下图为vue部分
• 采用watch监听数据变化,然后用this.$nextTick等待dom渲染完成再执行方法

预期得到这样的结果

实际上得到的结果

如果说在控制台执行方法，可以将上图变为预期结果

也就是说this.$nextTick的回调函数并不是在列表渲染结束之后执行方法，请问这是什么情况？

Answer 1

nextTick 是 “在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。” 很难保证 imageList 变化后的下一次 Dom 更新是图片渲染出来的那一次更新，不一定准确，建议通过渲染 控制展示，不要通过 Dom 操作的方法

---

评论不好贴代码

let img = new Image();
img.src = t.employeeItem.employeePic;
img.onload = function(){
    Vue.nextTick(() => {
    // do something
    }
}

Answer 2

1.确定一下imageList变化之后你的watch有没有执行
2.dom更新完了图片不一定加载完了
3.在nextTick里加下打印，看看有没有执行