0

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

我有一个带有两个观察者的 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，我知道这不是好的做法。

尽管如此，变异时还是会发生一些奇怪的事情watchedAfterMount：

  • 我第一次突变watchedAfterMount时，watchedAtInit()观察者在 之前被调用watchedAfterMountMethod()，尽管突变watchedAtInit发生在watchedAfterMountMethod.

  • 在进一步watchedAfterMount的突变中，顺序确实如预期：watchedAfterMountMethod被调用，它发生突变watchedAtInit，因此触发其观察者。

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

¿ 我会遗漏其他东西吗？

提前致谢。

4

1 回答 1

0

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

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

于 2019-11-20T09:16:23.640 回答