学习了解 Vue3 的 nextTick() 方法

一、学习了解 Vue3 的 nextTick() 方法

1、Vue.js 3引入了优化和改进的 nextTick()方法，用于在 DOM更新后执行回调函数，确保获得最新 DOM状态。

2、在 Vue 3中，nextTick()的行为与 Vue 2基本相同，但进行了优化以提高性能和稳定性。它利用微任务（microtask）确保在 DOM更新后执行回调，避免在同一事件循环中执行 DOM操作。

3、在 Vue 3的 setup()函数中，可以使用 nextTick()以确保在 DOM更新后执行特定逻辑。例如，可以使用 onMounted()钩子监听组件挂载事件，随后在 nextTick()中执行回调函数，确保在 DOM更新后获取正确状态。

4、值得注意的是，nextTick()的回调函数是异步执行的。即便在同一事件循环中多次调用 nextTick()，其回调函数也会按照调用顺序异步执行。

二、Vue中的updated和$nextTick

1、$nextTick用法：将回调延迟到下次 DOM更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM更新。

2、 updated用法：由于数据更改导致的虚拟 DOM重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM已经更新，所以你现在可以执行依赖于 DOM的操作。

3、 this.$nextTick()可以用作局部的数据更新后DOM更新结束后的操作，全局的可以用updated生命周期函数

4、可能你还没有注意到，Vue在更新 DOM时是异步执行的。只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。

5、（也就是说数据变化后，DOM不会马上更新，根据数据更新DOM的事件被放入异步队列中了）

6、如果同一个 watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue刷新队列并执行实际(已去重的)工作。

7、例如，当你设置 vm.someData='new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM状态来做点什么，这就可能会有些棘手。虽然 Vue.js通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM更新完成后被调用。

8、（在这个更新DOM的队列结束后，就会调用nextTick，从而执行里面的callback）

三、Process.nextTick 和 setImmediate 的区别

在理解两者的区别之前要说一下轮询

前面博客也有记录，nodejs中是事件驱动的，有一个循环线程一直从事件队列中取任务执行或者I/O的操作转给后台线程池来操作,把这个循环线程的每次执行的过程算是一次轮询.

即时计时器立即执行工作，它是在事件轮询之后执行,为了防止轮询阻塞,每次只会调用一个。

它和setImmediate()执行的顺序不一样，它是在事件轮询之前执行，为了防止I/O饥饿，所以有一个默认process.maxTickDepth=1000来限制事件队列的每次循环可执行的nextTick()事件的数目。

nextTick()的回调函数执行的优先级要高于setImmediate();

process.nextTick()属于idle观察者,setImmediate()属于check观察者.在每一轮循环检查中,idle观察者先于I/O观察者,I/O观察者先于check观察者.

在具体实现上,process.nextTick()的回调函数保存在一个数组中,

setImmediate()的结果则是保存在链表中.

在行为上,process.nextTick()在每轮循环中会将数组中的回调函数全部执行完.

而setImmediate()在每轮循环中执行链表中的一个回调函数.