#yyds干货盘点#Vue $watch监听对象属性，数组内对象属性改变 _属性

【#yyds干货盘点#Vue $watch监听对象属性，数组内对象属性改变】从来好事天生俭，自古瓜儿苦后甜。这篇文章主要讲述#yyds干货盘点#Vue $watch监听对象属性，数组内对象属性改变相关的知识，希望能为你提供帮助。
踩坑经历
我刚开始对数组里的对象属性监听以下对象里的newValue是改变后的新值，oldValue是改变之前的旧值

watch:{
listMenu[4].value:{
handler(newValue, oldValue) {
console.log(newValue)
}

直接报错Watcher only accepts simple dot-delimited paths. For full control, use a function instead

解决方法监听数组内对象属性变化
用以下两种方法即可：

//第一种方法：
created() {
this.$watch(
() => this.listMenu[4].value,
function(val, old) {}
)
}

//第二种方法：
computed:{
watchInputData(){ return this.listMenu[4].value }
},
watch:{
watchInputData() {
//这里即可监听到
}

监听一个对象及属性

/*普通watch无法监听到对象内部属性变化，只有data中数据改变时才能监听变化。
因此可添加deep属性:深层遍历，会监听对象内所有属性都变化。注意监听数组的变更不需要这么做。*/
watch: {
//第一种监听所有属性的变化,直接监听整个属性，消耗大不建议
obj: {
handler(newValue, oldValue) {
console.log("对象所有属性监听", newValue, oldValue);
},
deep: true
},

//第二种监听对象一个属性的变化
"obj.name": {
immediate: true, //true首次加载执行，默认false
handler(newValue, oldValue) {
console.log("单个属性监听", newValue, oldValue);
}
},
}
同样也可以设置计算属性computed来监听
omputed: {
getName: function() {
return this.obj.name
}
}
watch: {
getName: {
handler: function() {
//监听
},
}