watch对响应数据变化的触发时机在多个vue版本中表现不一致

[Liu-Wenbin]

场景：父组件定义msg为ref，msg1是computed并且依赖于msg，watch监听msg和msg1的变化。将msg和msg1通过props传入子组件，在子组件中同样watch监听msg和msg1的变化，然后修改msg的值，查看变化顺序。

在[email protected]中，执行顺序是：
1.计算属性msg1的getter
2.计算属性msg1的watcher
3.msg的watcher
4.子组件的msg1的watcher
5.子组件的msg的watcher

而在[email protected]中，执行顺序是：（在子组件中，msg和msg1的watcher执行顺序颠倒了）
1.计算属性msg1的getter
2.计算属性msg1的watcher
3msg的watcher
4.子组件的msg的watcher
5.子组件的msg1的watcher

我又试了vue2中，执行顺序又不一样：
1.msg的watcher
2.计算属性msg1的getter
3.计算属性msg1的watcher
4.子组件的msg的watcher
5.子组件的msg1的watcher

为什么各个版本的vue，它们的触发顺序这样不一致，是故意这么设计的还是设计时就没有考虑这个呢？

[liulinboyi]

Maybe the children component watch callback order will not affect results.

the children component are the same

If you write like this:

App.vue

<script setup>
import { ref, computed } from 'vue'
import Comp from './Comp.vue'

const msg = ref('Hello World!')
const msg1 = computed(() => {
  console.log('App msg1')
  return msg.value
})
</script>

<template>
  <Comp :msg1="msg1" :msg="msg" />
  <button @click="msg = 'ok'">
    Change
  </button>
</template>

playground demo

Click the change button, the console will show as below:

Or If you write like this:

App.vue

<script setup>
import { ref, computed } from 'vue'
import Comp from './Comp.vue'

const msg = ref('Hello World!')
const msg1 = computed(() => {
  console.log('App msg1')
  return msg.value
})
</script>

<template>
  <Comp :msg="msg" :msg1="msg1" />
  <button @click="msg = 'ok'">
    Change
  </button>
</template>

playground demo

Click the change button, the console will show as below:

The different is the order of the props when use the children component.

Children component:

Comp.vue

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
  msg: 'string',
  msg1: 'string'
})

watch(() => props.msg, (val) => {
  debugger
  console.log(val, 'msg')
})
  
watch(() => props.msg1, (val) => {
  debugger
  console.log(val, 'msg1')
})
  

</script>

<template>
{{ msg }} {{ msg1 }}
</template>

[Liu-Wenbin]

你好，谢谢解答，让我知道了一个新的知识点。

但是我遇到的问题没有能够得到解决，我刚刚试了一下，在[email protected]中，先被传入的prop的watcher会先执行，但是在[email protected]中，先被传入的prop的watcher反而后执行了。代码如下：

<template>
  <div class="app">
    <the-button
      :msg="msg"
      :msg1="msg1"
    ></the-button>

    <el-button @click="msg = 'bbb'">change</el-button>
  </div>
</template>

<script lang="ts" setup>
  import {
    ref,
    watch,
    computed,
  } from 'vue'
  import TheButton from './the-button.vue'

  const msg = ref('aaa')
  const msg1 = computed(() => {
    console.log('msg1 getter')
    return msg.value.repeat(2)
  })

  watch(msg, () => {
    console.log('watch msg')
  })

  watch(msg1, () => {
    console.log('watch msg1')
  })
</script>

<!-- the-button.vue ->
<template>
  <div class="the-button">

  </div>
</template>

<script lang="ts" setup>
  import {
    watch,
  } from 'vue'

  const props = defineProps({
    msg: String,
    msg1: String
  })

  watch(() => props.msg, () => {
    console.log('child watch msg')
  })

  watch(() => props.msg1, () => {
    console.log('child watch msg1')
  })
</script>

[Liu-Wenbin]

大佬有时间再看一下我的问题吗- -

[liulinboyi]

大佬有时间再看一下我的问题吗- -

Uh, This issue may relate to scheduler or others, I'm not very familiar with that. There may has some change in v3.2.38 and after v3.2.38's version and i had to spend a lot of time working of a day to earn money to support myself and didn't have much time to work on a problem that I was not very familiar with.

[zhenzhenChange]

最近的几个版本中确实改过watch的调度，因为像以前的调度中，watch在有无上下文的情况表现不一致（链接），在前几个版本中才修好，不过具体原因还得研究下，进一步确定是依赖收集顺序的问题，还是调度（回调）触发顺序的问题，亦或是其它问题，也建议你补充一个完整的demo测试提交一个issue。

这是其中一个 demo 。