Vue的watch 更改对象的两个属性，为什么只触发了一次？求大佬解惑

Question

<template>
    <div>
        {{ msg }}
    </div>
</template>
<script>
export default {
    data() {
        return {
            queryObj: {
                attr1: '',
                attr2: '',
                attr3: '',
                attr4: ''
            },
            msg: ''
        }
    },
    watch: {
        queryObj: {
            handler() {
                this.msg += '<br>改变了'
            },
            deep: true
        }
    },
    mounted() {
        // 第一种情况
        this.queryObj.attr3 = '2021-03-13'
        this.queryObj.attr4 = '2021-03-14'
        // 第二种情况
        // this.queryObj.attr3 = '2021-03-13'
        // this.$nextTick(() => {
        //   this.queryObj.attr4 = '2021-03-14'
        // })
    }
}
</script>

第一种情况 页面只打印了1次
第二种情况 页面只打印了2次预格式化文本

Answer 1

vue的优化
第一种情况，2次赋值合并成了1次更新，只触发1次
第二种情况，在第1次赋值更新渲染完成后，又执行了1 次赋值，又执行了更新，所以是2次

Answer 2

可以试试这样

this.queryObj = { attr3:'2021-03-13', ...this.queryObj };
this.queryObj = { attr4:'2021-03-14', ...this.queryObj };

Answer 3

试想一下，你媳妇儿生了个双胞胎，你要发两遍朋友圈吗，显然不用，只需要告诉别人生的是个双胞胎就行了。

一次性修改了对象的两个属性，watch又是deep的，这两次修改从逻辑上其实也没有先后优先级，那只需要关注变化前后就好，差异显然是两个属性，但是vue选择一次性告诉你