vue3中侦听器配置项flush:"post"与nextTick区别？

Question

vue3中侦听器配置项flush:"post"在组件更新后执行，而nextTick API等待下一次 DOM更新刷新,请问二者的使用有什么区别呢

Answer 1

可以看做是一样的，都是在数据更新后获取最新dom

因为 vue3 的更新队列分了三种 pre、queue、post，执行顺序也是在一个函数里先调用 pre 后调用 queue 最后是 post

vue在创建组件的时候，注册了 render 的监听，当 render 内的数据变更，将 update 放在了 queue 队列，这个走的不是 watch，是直接用的 ReactiveEffect （watch 也是对 ReactiveEffect 的二次封装）

当我们使用 watch 的时候，flush 默认是 pre，也就是当数据变更后监听回调被放入 pre 队列

所以：watch 的回调，永远比 render 先执行

而当加了 flush: 'post' 后，回调就被放入 post 队列，post永远比 queue 后执行

下面是 nextTick
nextTick 跟上面的不是同一个 promise 这个不知道能不能理解
当数据第一次变更后，创建一个新的 promise (方便理解，其实还是一个)，然后所有的队列回调都会 push 进这个 promise 里的回调调用
然后调用 nextTick 后，又创建一个新的 promise

所以：nextTick 永远比 ( pre + queue + post ) 后执行

下面是伪代码：

const p = Promise.resolve()

// 数据变更
p.then(() => {
    pre() // 清空pre队列
    queue() // 清空queue队列
    post() // 清空post队列
})
p.then(() => {
    nextTick()
})