javascript - 为什么 Vue 在两个 react 性数据突变 super 接近时只会更新一次？

Question

请看这个最小的例子

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);
  },
};

控制台只会记录“已触发!”一次，为什么会这样？

Vue 是如何判断这个批量更新的？

Answer 1

来自Vue guide on reactivity :

In case you haven’t noticed yet, Vue performs DOM updates asynchronously. Whenever a data change is observed, it will open a queue and buffer all the data changes that happen in the same event loop. If the same watcher is triggered multiple times, it will be pushed into the queue only once. This buffered de-duplication is important in avoiding unnecessary calculations and DOM manipulations. Then, in the next event loop “tick”, Vue flushes the queue and performs the actual (already de-duped) work.

因此，这两个 watch 触发器更新都发生在同一个更新周期中，并被 react 性系统“去重”到一个调用中。