Vue.nextTick的理解

官网说明：

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

原理：

当我们在一个Vue实例里面更新绑定的数据时，也就是data里面的值，可以分为两种情况，同步更新和异步更新。这里说下同步和异步，js是单线程的，从上至下执行到同步那里的代码时，数据就发生变化。当执行异步时，运行机制是：

1.所有的同步都是在主线程上执行，形成一个执行栈

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

3.当执行栈中的所有同步任务执行完毕，系统就会读取任务队列，异步任务结束等待状态，进入执行栈，开始执行。

4.主线程不断重复第三步

事件循环说明：

Vue在修改数据后，视图不是立即更新的，而是等待同一事件循环（tick）中的所有数据变化完成之后，再统一进行视图更新。

同一事件循环的理解：

1.所有的同步事件都是在同一tick中

2.异步都是单独的一个tick

举例说明下：

给红色正方形添加一个点击事件addProperty，改变下面p元素中的文字

结合打印结果分析：

1.主线程执行到95行改变vue实例绑定的p元素的值，但此时DOM元素并没有改变，97行打印出p元素初始值仍然是‘kk, do you love me’

2.这时同步事件执行完毕，就执行同步事件的tick，也就是95行中的打印结果，p元素变成'asd'

3.两个setTimeout的异步，第一个2秒后执行，第二个0秒后执行，所以先执行第二个。107行打印仍然是上个tick中的‘asd’，异步更改实例的值为‘wwwwwwww’

4.2秒后执行第二个setTimeout异步，100行打印DOM的值变成’wwwwwww‘。99行异步更改实例的值’xxxxxxxx‘

5.第二个异步完成，执行异步的tick，102行打印出DOM元素的值’xxxxxxxx‘

简单总结事件循环：

同步代码执行 ---> 执行同步tick ---> 查找异步队列，推入执行栈，执行Vue.nextTick[异步1] ---> 查找异步队列，推入执行栈，执行Vue.nextTick[异步2]........