Description
Vue version
3.4.37
Link to minimal reproduction
Steps to reproduce
When using Vue’s watch function with the { flush: 'sync' } option, I’ve observed different behaviors in the callback execution order depending on whether the watcher is observing a ref or a computed property.
Watching a ref:
If there are 5 sync watchers observing the same ref, the execution order of their callbacks is consistent and sequential, as expected.
const n = ref(0)
for (let i = 0; i < 5; i++) {
watch(n, (v) => {
console.log(`n (${i})`, v)
}, { flush: 'sync' })
}
n.value++Output
n (0) 1
n (1) 1
n (2) 1
n (3) 1
n (4) 1
Watching a computed:
However, if the watchers observe a computed property derived from the same ref, the execution order of the callbacks changes. The first watcher in the loop is executed last.
const n = ref(0)
const compN = computed(() => n.value)
for (let i = 0; i < 5; i++) {
watch(compN, (v) => {
console.log(`compN (${i})`, v)
}, { flush: 'sync' })
}
n.value++Output
compN (1) 1
compN (2) 1
compN (3) 1
compN (4) 1
compN (0) 1 <-
What is expected?
Output
compN (0) 1 <-
compN (1) 1
compN (2) 1
compN (3) 1
compN (4) 1
System Info
No response
Any additional comments?
I couldn't find documentation in Vue's official resources explaining the guaranteed execution order of sync watchers. Is the callback execution order for sync watchers is supposed to be guaranteed, or if the observed behavior with computed properties is unintended?
NOTE: the normal Watchers (without sync options) works as expected and trigger in order that they are defined.
Update: After version 3.5.0-alpha.1, I noticed that the Sync Watchers for ref and computed both ensure that the callbacks are executed in the order of LIFO, Is this guarantee intentional?