javascript - Vue watch 意外调用两次

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

更新: 我发现了导致此问题的原因:观察者似乎是重复的，因为它位于 BaseComponent 中，该代码由我的示例中使用的 Component 扩展。
所以 export default BaseComponent.extend({ name: 'Component', ...}) 似乎复制了 watch 对象，而不是“合并”它 - 现在在 BaseComponent (它最初实现的地方)中有一个，在 Component 中有一个 - 当然两者都对 Prop 更新使用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 - 但是每次执行该方法时 watch 都会被调用两次。

<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 。但这一切都没有改变观察者被调用两次的任何事情。

最佳答案

就我而言，我在组件中有“ watch ”并在页面上使用该组件两次，因此“ watch ”被注册了两次。

希望它会帮助有同样问题的人。

关于javascript - Vue watch 意外调用两次，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56260785/