vue2 - vue监听store中的getter属性对象，watch触发了两次，并且两次获取的值一样，怎么回事？

Question

在 store 中定义了一个 state 属性对象 taskObj，然后定义了一个 mutations 来设置这个变量，最后在某些页面通过watch来监听该 getter 属性，今天突然发现页面中监听该属性的地方执行了2次，并且打印出的内容完全一样，关键是这个 mutations 函数只执行了一次啊（端点调试）。

Answer 1

核心代码贴一下呗

Answer 2

这个问题可能有几个原因，但是最常见的一个是 Vue 的响应式系统以及 watch 的工作方式导致的。在 Vue 中，当你使用 watch 来监听一个响应式属性时，Vue 会尝试在属性改变时触发 watch 的回调函数。但是，Vue 的响应式系统可能在一些边缘情况下触发多次更新，尽管数据本身可能并没有改变。

以下是一些可能的原因和相应的解决方案：

1. 组件的重新渲染：组件可能因为某些原因被重新渲染，导致 watch 被触发。即使数据没有改变，Vue 的响应式系统也可能在重新渲染过程中重新评估 watch 的表达式。

   解决方案：确保组件的渲染只在其依赖的数据真正改变时发生。使用计算属性 (computed) 来替代复杂的 watch 表达式，以减少不必要的重新计算。

2. 异步更新队列：Vue 使用了异步更新队列来优化性能。这意味着，当多个属性改变时，Vue 会将这些改变收集起来，然后在下一帧中一次性更新视图。这可能导致 watch 被触发多次，尽管看起来数据没有改变。

   解决方案：如果你依赖 watch 中的异步行为（例如，在 watch 中发起网络请求），请确保你的代码能够正确处理多次触发的情况。你可以使用防抖（debounce）或节流（throttle）技术来限制 watch 回调函数的执行频率。

3. getter 的实现：有时，getter 的实现可能会导致看似相同的值被返回，但 Vue 的响应式系统认为它们是不同的。例如，如果 getter 返回了一个新的对象或数组，即使内容相同，Vue 也会认为数据已经改变。

   解决方案：确保 getter 返回的是相同的对象或数组引用，而不是每次都创建新的对象或数组。如果确实需要返回新的对象或数组，请考虑使用 Vue.set 或 this.$set 来确保 Vue 能够正确追踪这些变化。

4. 父组件和子组件的通信：如果你的组件是嵌套的，并且父组件和子组件都监听了同一个 store 中的 getter，那么当这个 getter 的值改变时，两个组件的 watch 都可能被触发。

   解决方案：仔细检查你的组件层次结构，确保你只在需要的地方监听 getter。如果可能的话，尝试使用事件总线或 Vuex 的 action/mutation 来代替直接的 watch。

请注意，要准确诊断问题的原因，你可能需要查看更多的代码和上下文信息。如果上述建议没有解决你的问题，建议你提供更多的代码和调试信息，以便进行更深入的分析。