javascript - Vue watch 意外调用了两次

Question

更新 #2: 这不是错误，是我自己的错。我扩展了 BaseComponent通过 extend()方法以及放置 extends: BaseComponent进入选项。我以为我需要两者，但是 extends: BaseComponent在选项中似乎就足够了。
因此，双重“扩展”显然复制了观察者，这导致了我在问题中记录的奇怪行为。

更新: 我发现了导致这个问题的原因:观察者似乎是重复的，因为它在 BaseComponent 中。由 Component 扩展在我的示例中使用。 所以export default BaseComponent.extend({ name: 'Component', ...})似乎重复了 watch对象而不是“合并”它 - 现在在 BaseComponent 中有一个(最初实现的地方)和 Component 中的一个- 当然，两者都会对 prop-updates 使用react。
恕我直言，这似乎是一个错误。

---

使用 vue-cli具有单个文件组件。
我通过一种方法在一个组件中设置一个 Prop :

<template>
  <div>
    <other-component :my-object="myObject" />
  </div>
</template>

<script>
  export default (Vue as VueConstructor).extend({
    data() {
      return {
        myObject: null
      }
    },

    methods: {
      actionButtonClicked(action, ID) {
        console.log('actionButtonClicked');

        this.myObject = {
          action: action,
          ID: ID
        }
      }
    }
  });
</script>

然后我用观察者观察另一个组件中的 Prop - 但每次执行该方法时都会调用两次观察。

<script>

  export default (Vue as VueConstructor<Vue>).extend({
    /* ... */
    props: {
      myObject: {
      type: Object,
      default: null
    },

    watch: {
      'myObject.ID'(value, oldValue) {
        console.log('watcher executed');
      }
    }

    /* ... */
  });

</script>

所以在控制台中我得到了输出:

actionButtonClicked
watcher executed
watcher executed

.. 每次方法被调用时。

我已经尝试了所有不同的观察者变体 - 例如 deep: true + handler .但这一切都没有改变 watcher 被调用两次的情况。

Answer 1

在我的例子中，我在一个组件中有“watch”，并在页面上使用了两次该组件，因此“watch”被注册了两次。

希望对遇到同样问题的人有所帮助。