vue 中 watch 失效

Question

data中有

watch监听form

直接用 this.form.cat_id=1_7eb3340579783ab51bf7e110f7a4f397，输出this.form如下，watch不起效

使用 this.$set(this.form,'cat_id','1_7eb3340579783ab51bf7e110f7a4f397'),输出this.form如下，watch 起效

我更加不理解的是用this.form.xx=yy修改其他值，功能又正常，这会是什么原因

---

我发现有个规律

form.cat_id 在 data 中赋值为 空字符串，this.form.cat_id="xxx" 不会触发 watch
form.cat_id 在 data 中赋值为非空字符串，this.form.cat_id="xxx" 会触发 watch
form.p 在 data 中赋值为 数值 1，this.form.o=2 则会触发 watch

Answer 1

我测试了一下，我这边第一种形式也是可以的；

第一张截图：
明显p和q属性应该是watch的，因为下面都有相应的get和set方法，但是并没有cat_id的get和set方法，也就是你的form里面的cat_id一开始的时候并没有设置进去（至于为什么，我也不知道），也就是一开始form里面并没有cat_id属性，所以使用this.form.cat_id = ...属于新增属性，并不能被watch到，新增属性只能通过this.$set的形式被watch。

因为q和p都有get和set方法，那应该就是正常watch的，所以那样修改没有问题。
你是不是在某个地方删除过cat_id这个属性？

Answer 2

这样就会生效了

watch:{
    'form.cat_id': function (newValue, oldValue) {
        ...
    }
}

我按照你的敲了一遍, 修改 p q cat_id 都可以生效 你看看

data(){
    return {
        form:{
            p:1,
            q:64,
            cat_id:'',
        }
    }
},
watch:{
    form:{
        handler(newValue, oldValue) {
            console.log("---nnn---")
        },
        deep: true
    }
},
mounted: function () { 
    setTimeout(()=>{
        this.form.cat_id="xxx"
        // this.form.q=2
    },2000)
}

Answer 3

watch有一个deep属性的，可以试一下