vue 中 watch 監聽 Object對象 變化

針對Object對象,如:

# Object 監聽值
tobj:{
'a':1
}

第一種

watch: {
    tobj(new_value,old_value){
        console.log(new_value,old_value)
    }
}

上面的寫法只會監聽tobj是否有值的變化,如果內部,如a的值發生了變化,不會觸發watch
第二種

watch: {
    tobj:{
        handler(new_value,old_value){
            console.log(new_value,old_value)
        },
        deep: true
    }
}

添加deep屬性,向下添加監聽到每一個key,deep默認是false
這種可以監聽a的變化,但是這個不能由單一改變一個值觸發watch,例如:

tobj['a']=2

 

就不會觸發watch

如果需要改變內部值並且觸發watch,需要用Vue.$set

this.$set(tobj,'a',2)

 

如此,便可以觸發watch！