关于Vue异步队列更新

Question

export default {
  data() => ({
    data:{
        a:0,
        b:0
    }
  }),
  methods: {
    buttonClick(){
      this.data.a = 1;
      this.data.b =2;
    },
    buttonClk(){
     this.data = {
       a:1,
       b:2
     };
    }
  }
}

当执行buttonClick的时候异步队列渲染，有几次？
buttonClick和buttonClk有这两个赋值有什么区别么？哪个性能会更好一点？

Answer 1

渲染0次或1次，而这取决于你的页面中有没有用到data变量。

两个性能一样。

为什么会有异步队列渲染，就是为了优化buttonClick中的情况，如果没有异步渲染且页面同时使用了data.a和data.b的话，那么当你为data.a赋值的时候，页面会渲染一次，当你再为data.b赋值的时候，页面又会渲染一次，这明显是有性能上的浪费的，所以进行异步渲染，此时a，b都已经修改完毕，页面也只需要渲染一次。这也适用于其他Watcher。

Answer 2

我用 vue-devtool 试了一下没有区别呀