Vue 观察者的第一个回调未在 post 上排序 "correctly"-实例化观察者

Question

我有以下疑问，无论代码质量如何或未遵循最佳实践。

我有一个带有两个观察者的 Vue 组件。其中一个在组件的 watch 对象上声明（因此在其创建时实例化），另一个在 mounted() 处实例化，以避免在第一次突变时调用它。

data: {
  return() {
    watchedAtInit: null,
    watchedAfterMount: null,
  };
},

mounted() {
  api.fetchSomething().then((response) => {
    this.watchedAtInit = response.watchedAtInit;
    this.watchedAfterMount = response.watchedAfterMount;
    this.$watch('watchedAfterMount', this.watchedAfterMountMethod);
  });
},

watch: {
  watchedAtInit() {
    // something
  }
}

methods: {
  watchedAfterMountMethod() {
    this.watchedAtInit = someValue;
  },
}

这里的问题在最后：watched 变量 watchedAtInit 正在从另一个 watcher watchedAfterMountMethod 变异而来，我的理解是 .

仍然，变异时会发生一些奇怪的事情 watchedAfterMount:

我第一次变异 watchedAfterMount，watchedAtInit() watcher 在 before watchedAfterMountMethod()，尽管 watchedAtInit 的突变发生在 watchedAfterMountMethod.
在进一步的 watchedAfterMount 突变中，顺序确实符合预期：调用 watchedAfterMountMethod，它突变 watchedAtInit，因此触发其观察者。

¿为什么 watchedAfterMount 观察者在第一次突变时会延迟？ ¿它是否与 Vue 的反应系统有关，或者仅仅是观察者实施不正确的结果？

¿我还能遗漏什么吗？

提前致谢。

Answer 1

默认情况下不会在挂载时初始化观察者，但您可以像这样编写观察者来强制此行为：

watch: {
  watchedAtInit: {
    immediate: true,
    handler() {
    // something
    }
  }
}

Vue 观察者的第一个回调未在 post 上排序 "correctly"-实例化观察者

Vue watcher's first callback not ordered "correctly" on post-instantiation watchers

watch

vue.js

vuejs2

vue-reactivity