为啥当两个响应式数据突变超级关闭时，Vue 只会更新一次？

Posted 2023-02-22

【中文标题】为啥当两个响应式数据突变超级关闭时，Vue 只会更新一次？

【英文标题】：Why Vue will update only once when two reactive data mutation super close?为什么当两个响应式数据突变超级关闭时，Vue 只会更新一次？

【发布时间】：2021-03-10 03:07:32

【问题描述】：

请看这个最小的例子

export default 
  data() 
    return 
      name: "Amy",
      age: 18,
    ;
  ,
  computed: 
    combinedDataForWatching() 
      return 
        name: this.name,
        age: this.age,
      ;
    ,
  ,
  watch: 
    combinedDataForWatching() 
      console.log("Triggered!");
    ,
  ,
  mounted() 
    setTimeout(() => 
      this.name = "Bob";
      this.age = 20;
    , 1000);
  ,
;

控制台只会记录一次"Triggered!"，为什么会这样？

而 Vue 是如何确定这批更新的？

【参考方案1】：

来自Vue guide on reactivity：

如果您还没有注意到，Vue 会异步执行 DOM 更新。每当观察到数据更改时，它将打开一个队列并缓冲同一事件循环中发生的所有数据更改。如果同一个 watcher 被多次触发，它只会被推入队列一次。这种缓冲的重复数据删除对于避免不必要的计算和 DOM 操作很重要。然后，在下一个事件循环“tick”中，Vue 刷新队列并执行实际的（已经去重复的）工作。

因此，这两个监视触发器更新都发生在同一个更新周期中，并且被反应系统“重复数据删除”到一个调用中。

【讨论】：

好的，谢谢您的信息。知道如何解决吗？

@ValentinHeinitz - 它没有坏，这里没有什么可修复的。