.png?table=block&id=13a4048d-b36d-81db-bfa1-f0d7ab7eb3de&t=13a4048d-b36d-81db-bfa1-f0d7ab7eb3de)
type
status
date
slug
summary
tags
category
icon
password
AI 摘要
概览
官方文档说明：
- 用法：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
疑问：
- DOM 更新循环是指什么？
- 下次更新循环是什么时候？
- 修改数据之后使用，是加快了数据更新进度吗？
- 在什么情况下要用到？
原理
异步说明
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化
具体来说，异步执行的运行机制如下。
（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
下图就是主线程和任务队列的示意图。
事件循环说明
简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
知乎上的例子：
图解：
事件循环：
第一个 tick（图例中第一个步骤，即'本次更新循环'）：
- 首先修改数据，这是同步任务。同一事件循环的所有的同步任务都在主线程上执行，形成一个执行栈，此时还未涉及 DOM 。
- Vue 开启一个异步队列，并缓冲在此事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。
第二个 tick（图例中第二个步骤，即'下次更新循环'）：
同步任务执行完毕，开始执行异步 watcher 队列的任务，更新 DOM 。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel 方法，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。
第三个 tick（图例中第三个步骤）：
此时就是文档所说的
下次 DOM 更新循环结束之后
此时通过 Vue.nextTick 获取到改变后的 DOM 。通过 setTimeout(fn, 0) 也可以同样获取到。
简单总结事件循环：
同步代码执行 -> 查找异步队列，推入执行栈，执行Vue.nextTick[事件循环1] ->查找异步队列，推入执行栈，执行Vue.nextTick[事件循环2]...
总之，异步是单独的一个tick，不会和同步在一个 tick 里发生，也是 DOM 不会马上改变的原因。
对于事件循环，可以在这里查看更详细的内容：
用途
应用场景：需要在视图更新之后，基于新的视图进行操作。
created、mounted
需要注意的是，在 created 和 mounted 阶段，如果需要操作渲染后的试图，也要使用 nextTick 方法。
官方文档说明：
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted
其他应用场景
其他应用场景如下三例：
例子1：
点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点。
修改为：
例子2：
点击获取元素宽度。
例子3：
使用 swiper 插件通过 ajax 请求图片后的滑动问题。
实例理解 nextTick 应用
下面的例子来自 https://www.cnblogs.com/hity-...， 稍有改动。各位可以复制运行一遍，加深理解。
结果：
参考文章
- Author:hancheng
- URL:http://preview.tangly1024.com/article/13a4048d-b36d-81db-bfa1-f0d7ab7eb3de
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
.jpg?table=block&id=13a4048d-b36d-812f-ac28-ea02e470c2e6&t=13a4048d-b36d-812f-ac28-ea02e470c2e6)
.png?table=block&id=13a4048d-b36d-8033-a66a-c1f3ceccae91&t=13a4048d-b36d-8033-a66a-c1f3ceccae91)