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;
  },
}

问题就在最后：被监视的变量watchedAtInit是从另一个观察者watchedAfterMountMethod突变而来的，据我所知是not good practice。

仍然，在对watchedAfterMount进行突变时会发生一些奇怪的事情：

我第一次突变watchedAfterMount时，将 watchedAtInit() 观察者称为之前 watchedAfterMountMethod() ，尽管watchedAtInit发生了突变，但发生在watchedAfterMountMethod。
在进一步的watchedAfterMount突变中，顺序确实符合预期：调用watchedAfterMountMethod，它使watchedAtInit突变，从而触发其监视程序。

¿watchedAfterMount观察者为何在第一次变异时延迟？ ¿它与Vue的反应性系统有关，还是仅仅是由于错误地实施了观察程序？

¿我还能错过其他东西吗？

谢谢。

Answer 1

默认情况下，观察者不会在挂载时初始化，但是您可以强制这种行为来编写观察者，如下所示：

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

在实例化后的观察者上，Vue观察者的第一个回调未“正确”排序

1 个答案: