vue记录：nextTick应用时机

nextTick 是 Vue.js 提供的一个方法，主要用于在下次 DOM 更新循环结束之后执行延迟回调。其调用时机可以分为以下几个点：

1. 调用时机：

   • 数据更新后：当 Vue 侦听到数据变化并开启一个队列来缓冲这些变化时，nextTick 可以在这些变化被实际应用到 DOM 之前被调用。这允许你在 DOM 更新之前执行一些操作，然后在 DOM 更新完成后执行另一些操作。
   • 页面挂载后：在 Vue 实例的 mounted 钩子函数中，你也可以使用 nextTick。虽然 mounted 钩子在实例被挂载到 DOM 后立即执行，但它不会等待所有的子组件也被挂载。因此，如果你希望在整个视图都渲染完成后执行某些操作，可以在 mounted 内部使用 nextTick。

2. 深入解析：

   • 异步队列：Vue 在内部使用异步队列来处理数据变化。当数据变化时，Vue 会将这些变化放入一个队列中，并在下一个“tick”中刷新队列并执行实际的工作。nextTick 允许你在这个队列刷新之后执行代码。
   • Promise 和 MutationObserver：nextTick 的实现基于 Promise 和 MutationObserver（在现代浏览器中）。Promise 用于在异步操作完成后执行回调函数，而 MutationObserver 是一个异步的 DOM 监听器，可以监听 DOM 变化并在变化发生时触发回调函数。
   • JavaScript 事件循环：了解 JavaScript 的事件循环对于理解 nextTick 的工作原理很重要。在事件循环中，所有同步任务都在主线程上执行，形成一个执行栈。异步任务的结果会被放入“任务队列”中。当执行栈中的所有同步任务完成后，系统会读取“任务队列”并执行相应的异步任务。nextTick 的回调就是在这些异步任务被执行的某个点之后执行的。
   • macro task 和 micro task：在 JavaScript 的事件循环中，任务被分为 macro task 和 micro task 两大类。每个 macro task 结束后，都会清空所有的 micro task。Vue 的 nextTick 可能涉及到这两种类型的任务，但具体实现可能会因 Vue 的版本和浏览器的不同而有所差异。

总结来说，nextTick 是在 Vue 的数据变化被应用到 DOM 之后，但在浏览器渲染这些变化之前的一个“钩子点”。它允许你在这个关键点执行代码，从而确保你的操作基于最新的 DOM 状态。