为什么watcher会触发两次？答案

【问题标题】：Why does watcher trigger twice?为什么watcher会触发两次？
【发布时间】：2019-08-01 08:54:47
【问题描述】：

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

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

观察者触发两次。这是包错误还是 vue 的本质？

如何重现：

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

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

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

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

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

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

如果您愿意，可以在此处查看源代码： https://github.com/vuematerial/vue-material/blob/dev/src/components/MdDatepicker/MdDatepicker.vue

【讨论】：

你有什么解决办法吗？
取决于你想用这个值做什么。
我只想触发一次观察者
你可以在 watcher 函数中添加一个去抖动器（例如：davidwalsh.name/javascript-debounce-function），但是根据你想要对值做什么，你也可以使用 vue 中的计算属性
刚在本地电脑上试了下，使用computed时还是会触发两次。

【解决方案2】：

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

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

【讨论】：

这仍然会在每次 newval 为空时记录两次

【解决方案3】：

您可以简单地检查：

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

【讨论】：

这实际上记录了 3 次，发生时变得更糟
真的吗？上面的代码框只记录一次给我。
我已经更新了沙盒。你会发现问题