Question

我正在使用vue-material.io，尤其是日期选择器。

但是在状态观察过程中我遇到了问题。

观察者触发两次。这是软件包错误还是Vue的性质？

如何复制：

尝试选择日期并查看控制台。

您可以看到它两次意外触发。

https://codesandbox.io/s/vue-material-basic-example-hxzwp

Answer 1

我认为这与组件内部的观察者有关。如果通过单击更改日期，它将设置数据并发出数据。然后内部观察器启动，还通过格式化数据来更改数据并再次发出值。这样，您的观看者就会被触发两次。

这种行为可能让人感到奇怪，但这是正确的。

如果需要，可以在此处签出源代码： https://github.com/vuematerial/vue-material/blob/dev/src/components/MdDatepicker/MdDatepicker.vue

Answer 2

您可以比较oldVal和newVal并仅在值更改时执行事件

  watch: {
    selectedDate(newVal, oldVal) {
      if (!newVal || !oldVal || newVal.getTime() !== oldVal.getTime()) {
        console.log(`this is ${newVal}`);
      }
    }
  }

Answer 3

您只需检查以下内容即可：

if (!newVal || `${newVal.getHours()}${newVal.getMinutes()}${newVal.getSeconds()}` === '000') {
    // your code here
    console.log(`this is ${newVal}`);
}

为什么观察者会触发两次？

3 个答案: