this.$nextTick()的使用场景

一、应用场景：需要在视图更新之后，基于新的视图进行操作。

注意：在created()和mounted()生命周期函数中，如果要操作渲染后的视图，也要使用nextTick方法，或者放入异步函数setTimeout中。

mounted()函数中，也不能保证所有的子组件已经更新， 不会承诺所有的子组件也都一起被挂载，因此也是需要放入nextTick方法。

二、原理：Vue实现响应式并不是数据发生变化之后DOM立即变化，而是异步执行DOM更新的。

异步执行的运行机制是什么样的？阮一峰老师是这样总结的：

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。

主线程不断执行任务、获取任务、执行任务……的过程叫做事件循环

三、vue 异步更新队列：

vue是依靠数据驱动视图更新的，该更新的过程是异步的。即：当侦听到你的数据发生变化时， Vue将开启一个队列（该队列被Vue官方称为异步更新队列）。视图需要等队列中所有数据变化完成之后，再统一进行更新。