Vue.js 在值完全更新之前调用Vue 3 watch

我正在开发我的第一个Vue 3（因此也是vuex 4）应用程序，它来自一个非常稳定的Vue 2背景

我有一个组件，它通过vuex操作加载数据，然后通过

setup（）

fancy

这是一个嵌套很深的对象，我认为这可能很重要

然后，我想根据值的变化运行一个函数，因此我在我的

mounted（）

生命周期挂钩中设置了一个

watch

 watch(
      this.fancy,
      (newValue) => {
        for (const spreadsheet in newValue) {
          console.log(Object.keys(newValue[spreadsheet].data))
          setTimeout(()=>{
            console.log(Object.keys(newValue[spreadsheet].data))
          },500)
          ...

我试着在设置中使用新的

onMounted（）

hook，而不是

watchEffect

和

store.watch

，但是我无法在onMounted hook中可靠地触发watch/watchEffect，而且watchEffect似乎从未根据我计算的store值进行更新。如果你对此有深入了解，那就很方便了

但我真正的问题是，我的观察者似乎在值更新之前就被调用了。例如，对于第一组密钥，我的代码将注销

[]

，然后在半秒钟后注销完整数组。如果这是一种渐进式的数据填充，那么我会期望再次调用watcher，并使用一个新的

newValue

。我也试过了。我的watcher上所有的

flush

、

deep

和

immediate

排列都没有用

nextTick（）

s也不起作用。我认为这一定与我对新的反应性变化缺乏了解有关，但我不确定如何应对，在我的应用程序中添加随机延迟显然是错误的

---

谢谢。

您能丰富这个，以便我们调试它吗？谢谢您设置它，我不熟悉这个工具。我的最小示例似乎与预期的一样有效，因此我将继续进行二分法以尝试找到问题。您是否可以对此进行丰富以允许我们进行调试？感谢您设置该示例，我不熟悉该工具。我的最小示例似乎如预期的那样有效，因此我将继续进行二分法以尝试找到问题所在。

 watch(
      this.fancy,
      (newValue) => {
        for (const spreadsheet in newValue) {
          console.log(Object.keys(newValue[spreadsheet].data))
          setTimeout(()=>{
            console.log(Object.keys(newValue[spreadsheet].data))
          },500)
          ...