javascript - vue 监听watch问题

Question

new Vue({

el:'#app',
data:{
    pen:{
        penc:false
    }
},
watch:{
    pen.penc:function(){
        
    }
}

});

pen.penc 这样监听会报错。 怎么监听这种对象？

Answer 1

加上双引号，

el:'#app',
data:{
    pen:{
        penc:false
    }
},
watch:{
    "pen.penc":function(){
        
    }
}

Answer 2

watch: {
    pen: {
        handler: function(val) {
            //处理 val.penc
        }, 
        deep: true
    }
}