Vue 中为什么要有nextTick？
2020-09-30 02:29:22
Vue 中要有 nextTick 是因为 Vue 的 DOM 更新是异步执行的。
一、nextTick 的定义与作用nextTick 是 Vue 提供的一个方法，用于在下次 DOM 更新循环结束之后执行延迟回调。当数据发生变化时，Vue 并不会立刻去更新 DOM，而是将修改数据的操作放入一个异步更新队列中。如果一直修改相同数据，异步更新队列还会进行去重，等待同一事件循环中的所有数据变化完成之后，才会将队列中的事件拿来处理，进行 DOM 的更新。因此，在数据变化后立即获取更新后的 DOM 节点，可能会得到旧值。而使用 nextTick 方法，可以在 DOM 更新完成后执行回调函数，从而获取到最新的 DOM 节点。
二、nextTick 的使用场景- 获取更新后的 DOM：在修改数据后，如果需要立即获取更新后的 DOM 结构，可以使用 nextTick 方法。
- 执行依赖于 DOM 的操作：在数据变化后，如果需要进行一些依赖于 DOM 的操作（如计算元素的高度、宽度等），可以使用 nextTick 方法来确保操作在 DOM 更新完成后执行。
Vue.nextTick(callback, [context])：
callback：在 DOM 更新完成后执行的回调函数。
context：（可选）回调函数的执行上下文。
vm.$nextTick(callback)：
在组件实例中使用，与 Vue.nextTick 类似，但回调函数中的 this 将自动绑定到当前的 Vue 实例上。
返回 Promise：
nextTick 方法在没有传入回调函数时，会返回一个 Promise 对象，可以使用 async/await 语法来完成相同的作用。
nextTick 的实现原理主要是利用了 JavaScript 的异步任务机制。Vue 会将回调函数放入一个异步操作队列（callbacks）中，然后执行一个异步延迟函数（timerFunc）。这个异步延迟函数会根据当前环境支持的方法来确定调用哪个，如 Promise.then、MutationObserver、setImmediate 或 setTimeout。当事件循环到了微任务或宏任务时，会执行这个异步延迟函数，依次执行 callbacks 中的回调。
- callbacks：异步操作队列，用于存储待执行的回调函数。
- timerFunc：异步延迟函数，用于将回调函数的执行放入事件循环的下一个微任务或宏任务中。
- flushCallbacks：用于执行 callbacks 中的回调函数，并将 callbacks 置空。
Vue 中的 nextTick 是一种优化策略，用于在数据变化后确保 DOM 更新完成后再执行回调函数。它利用了 JavaScript 的异步任务机制，将回调函数放入异步操作队列中，并在 DOM 更新完成后依次执行。使用 nextTick 可以避免在数据变化后立即获取旧值的问题，确保操作在 DOM 更新完成后执行。
热门标签
