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

<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次
1 Like

大概是一个周期内,以最后一次为准。

异步更新队列