Example for watching multiple data sources with watch() is imprecise

[zhenzhenChange]

Version

3.2.0-beta.7

Reproduction link

https://codesandbox.io/s/fast-haze-xcrmb?file=/src/App.vue

Steps to reproduce

Run the above demo

or

The explanation in the documentation is not: a callback is executed after each change

What is expected?

Shouldn't a callback be executed after every change?

What is actually happening?

Execute only one callback for multiple changes

[LinusBorg]

The behavior in the demo is the indended one. I think the docs over-simplified here for the sake of brevity.

Could be solved by adding a await nextTick() between the two assingnments. I'll transfer the issue to the docs repo

[zhenzhenChange]

No，No，No

This is only one of the questions, there is a more important question is that after synchronizing each item of the changed data source, only one callback is executed?
For example, the two changes in the figure, why the cb of watch only once, I do not want to await nextTick(), because I need the two state before and after the value to do logic out.

Please see the following example:

const a = ref(1)
const b = ref(2)

setTimeout(() => {
    a.value = 11
    b.value = 22
}, 1000)

// Only one `cb` will be executed
watch([a, b], ([a, b], [preA, preB]) => {
    if(a === b) {
        // ......
    }
})

const a = ref(1)
const b = ref(2)

setTimeout(() => {
    a.value = 11
}, 1000)

setTimeout(() => {
    b.value = 22
}, 1000)

// will execute `cb` twice
watch([a, b], ([a, b], [preA, preB]) => {
    if(a === b) {
        // ......
    }
})

• Multiple changes in the same setTimeout will only execute cb once
• But separate changes in different setTimeout will execute cb for each change

Instead, in newer versions of react, there is a merge.（I don't mean to brag, just to compare the differences）
https://codesandbox.io/s/great-hopper-0omj1?file=/src/App.js

I think it's an important point to understand the design thinking behind this, it's not just about the documentation, thank you

[zhenzhenChange]

Because Vue doesn't have batchUpdate, it doesn't have the logic of synchronously changing two ref twice, and if you split the setTimeout, you have the situation of synchronously triggering twice, and the logic is inconsistent

[zhenzhenChange]

I hope you can transfer back, maybe we misunderstood, we just want to ask for confirmation

[zhenzhenChange]

Adding to our understanding, this round of timers, as long as the timing is the same, should all trigger at the same event loop, because its callback trigger criteria is time, and the time is the same, it will trigger at the same time.

[zhenzhenChange]

Our big brother on this side says that it is the set operation xx.value=xxx that blocks the current thread

[LinusBorg]

1. The adjustment of the docs to better describe how the current implementation works is still needed. I will leave this ticket here for that reason.
2. It sounds like you want to propose a different behaviour / additional "mode" for how watch behaves here. That should ideally not happen in a bug report, because the current behaviour is not a bug. Discussion of a new featue such as this, which would have a considerable impact on implementation, can happen in our RFCs repo, first in a discussion thread and later in an actual RFC.

Sidenote: Vue's scheduler revolves around ticks, microtasks. Each SetTimeout pushes a task to a new call stack (macrotask). React works differently in that regard.

[zhenzhenChange]

Ok ok, I understand, at the moment, it's a normal feature, if I need additional features then I need to go mention the feature request rfc, thank you for your patience in solving the problem

[zhenzhenChange]

🤺🤺🤺🤺🤺 😁😁

[zhenzhenChange]

Executed twice, as expected (executed once at the beginning, that's why the issue was raised)

<script setup lang="ts">
import { ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'

const valueOne = ref('one')
const valueTwo = ref('two')

watch([valueOne, valueTwo], (oneWithTwo, preOneWithTwo) => {
  console.log(oneWithTwo, preOneWithTwo)
})

valueOne.value = 'change one' // ["change one", "two"] , ["one", "two"]
valueTwo.value = 'change two' // ["change one", "change two"] , ["change one", "two"]
</script>

---

Ditto (this is the final solution discussed in this issue: add await nextTick(), documented above)
But just like the above, it can be executed twice without adding, and I'm wondering

<script setup lang="ts">
import { ref } from '@vue/reactivity'
import { nextTick, watch } from '@vue/runtime-core'

const valueOne = ref('one')
const valueTwo = ref('two')

watch([valueOne, valueTwo], (oneWithTwo, preOneWithTwo) => {
  console.log(oneWithTwo, preOneWithTwo)
})

valueOne.value = 'change one' // ["change one", "two"] , ["one", "two"]

await nextTick()

valueTwo.value = 'change two' // ["change one", "change two"] , ["change one", "two"]
</script>

---

Merge changes, only one cb was executed

<script setup lang="ts">
import { ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'

const valueOne = ref('one')
const valueTwo = ref('two')

setTimeout(() => {
  valueOne.value = 'change one'
  valueTwo.value = 'change two'

  // ["change one", "change two"] , ["one", "two"]
}, 1000)

watch([valueOne, valueTwo], (oneWithTwo, preOneWithTwo) => {
  console.log(oneWithTwo, preOneWithTwo)
})
</script>

---

<script setup lang="ts">
import { ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'

const valueOne = ref('one')
const valueTwo = ref('two')

// One
setTimeout(() => {
  valueOne.value = 'change one'

  // ["change one", "two"] , ["one", "two"]
}, 1000)

// Two
setTimeout(() => {
  valueTwo.value = 'change two'

  // ["change one", "change two"] , ["change one", "two"]
}, 1000)

watch([valueOne, valueTwo], (oneWithTwo, preOneWithTwo) => {
  console.log(oneWithTwo, preOneWithTwo)
})
</script>

---

<script setup lang="ts">
import { ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'

const valueOne = ref('one')
const valueTwo = ref('two')

watch([valueOne, valueTwo], (oneWithTwo, preOneWithTwo) => {
  console.log(oneWithTwo, preOneWithTwo)
})

// Merge
function change() {
  valueOne.value = 'change one'
  valueTwo.value = 'change two'

  // ["change one", "change two"] , ["one", "two"]
}
</script>

<template>
  <button @click="change">change</button>
</template>

---

Turn on the flush: "sync" option
(Not sure I understand the role of sync in this example)

<script setup lang="ts">
import { ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'

const valueOne = ref('one')
const valueTwo = ref('two')

// Turn on the [flush: "sync"] option
watch(
  [valueOne, valueTwo],
  (oneWithTwo, preOneWithTwo) => {
    console.log(oneWithTwo, preOneWithTwo)
  },
  { flush: 'sync' },
)

function change() {
  valueOne.value = 'change one' // ["change one", "two"] , ["one", "two"]
  valueTwo.value = 'change two' // ["change one", "change two"] , ["change one", "two"]
}
</script>

<template>
  <button @click="change">change</button>
</template>

The nature is the same :

<script setup lang="ts">
import { ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'

const valueOne = ref('one')
const valueTwo = ref('two')

setTimeout(() => {
  valueOne.value = 'change one' // ["change one", "two"] , ["one", "two"]
  valueTwo.value = 'change two' // ["change one", "change two"] , ["change one", "two"]
}, 1000)

watch(
  [valueOne, valueTwo],
  (oneWithTwo, preOneWithTwo) => {
    console.log(oneWithTwo, preOneWithTwo)
  },
  { flush: 'sync' },
)
</script>

---

In general, the first example is a bit confusing, one moment will merge changes to be executed only once, and then synchronously executed twice (suspected with the browser's event loop), the rest are in line with expectations.

😵😵😵😵😵

PS : The effect is the same in <script> as in <script setup>, It should not be related to the version, So I can't tell if it's a Browser problem or a Vue problem

[zhenzhenChange]

• Synchronization = Twice
• Synchronization within asynchronous functions = Once
• Two asynchronous functions, one event loop triggered = Twice

I don't want to use the flush: "sync" tag because it's not logical anymore

[skirtles-code]

Interesting. If a pre watcher is triggered inside setup it runs immediately, skipping the scheduler queue.

The relevant section in the Vue code is here:

https://github.com/vuejs/vue-next/blob/1994f1200d12c05e509a812f2455de9da101c649/packages/runtime-core/src/apiWatch.ts#L347

if (!instance || instance.isMounted) {
  queuePreFlushCb(job)
} else {
  // with 'pre' option, the first call must happen before
  // the component is mounted so it is called synchronously.
  job()
}

In summary, if a pre watcher is associated with a component instance and that component instance hasn't mounted yet then the watcher is treated as though it were flush: 'sync'. This not only applies to changes made in setup, I was able to reproduce it using data/created/$watch too.

Vue 2 had a much less sophisticated scheduler but, as far as I can tell, it did batch the watcher calls if changes were made inside created.

While the code is clearly doing this on purpose, that bit of code dates back to 2019 and it does cause counter-intuitive behaviour in this edge case. The docs do need changing but trying to work around this oddity in the docs should probably be a last resort. The scheduler queue has changed a lot since that bit of code was written, there wasn't even a separate queue for pre watchers at that point. Perhaps there's a better way to fix the underlying problem with the current scheduler?

@LinusBorg What do you think? Should I open an issue against vue-next to see whether someone can come up with a better way to implement this, retaining the usual batching?