Question

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

更新：我发现了导致此问题的原因：该观察者似乎是重复的，因为它位于BaseComponent中，而该Component由{我的例子。因此export default BaseComponent.extend({ name: 'Component', ...})似乎是在复制watch对象，而不是“合并”它-BaseComponent中有一个对象（最初实现时在其中），而Component中有一个对象-当然也会对prop-update做出反应。
恕我直言，这似乎是个错误。

将vue-cli与单个文件组件一起使用。
我正在通过一种方法在一个组件中设置道具：

<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>

然后我正在用观察者观察其他组件中的道具-但是在每次执行该方法时，都会调用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。但这一切都没有改变观察者被两次召唤的情况。

Answer 1

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

希望它会对遇到相同问题的人有所帮助。

Answer 2

我的观察者是重复的，因为我以两种方式扩展了BaseComponent：

通过组件本身的extend()方法
通过将extends: BaseComponent放入“外部”组件的选项中

我认为您需要同时使用这两段代码来扩展另一个组件，但是显然这是错误的，并且可能导致不良的副作用。

Answer 3

您可能想使用诸如vue控制台之类的工具检查组件树，或手动遵循页面上已导入组件的列表，以确保不会无意两次导入任何组件。

我在默认布局中有一个模式，但想在特定页面上显示模式主体/主要内容（即不被模式触发）。我最终都导入了两者，并且vue正确地将它们视为单独的实例。这意味着奇怪的行为，例如模态需要两次单击才能消失，当然，他们的观察者也被呼叫两次

Vue观看了两次意外呼叫

3 个答案: