Vue $nextTick使用

遇到问题

在vue页面中使用elementUI的弹出层 在页面初始化时加载的JsBarcode 条形码没有出现

然后我在思考是否是和echarts 一样视图生成但是数据并没有渲染. 获取不到DOM

这个时候要介绍一下 Vue $nextTick

使用场景

在进行获取数据后,需要对视图进行下一步操作或者其他操作时,发现获取不到DOM

原因:

这里就涉及到Vue一个很重要的改建:异步更新队列(JS运行机制, 事件循环).

Vue在观察到数据变化时并不是直接更新DOM,而是开启一个队列,并缓冲在同一事件循环中发生的所有数据改变.

在缓冲时会去除重复数据.从而避免不必要的计算和DOM操作.

然后,在下一个事件循环tick中,Vue刷新队列并执行实际(已去重)工作.

所以如果用for循环来动态改变数据100次,其实他只会应用最后一次改变,如果没有这种机制,DOM就要重绘100次 

很过分 会让你变老变慢