vue 侦听器 watch 之 深度监听(deep)的用法

监听第二层

watch:{
'obj.name':{
handler:function(newV,oldV){
console.log('watch中：',newV)
}
}
}

监听第三层

<template>
<div>
<p>FullName: {{person.fullname}}</p>
<p>FirstName: <input type="text" v-model="person.firstname"></p>
</div>
</template>
<script>
export default {
data(){
return {
person: {
firstname: 'Menghui',
lastname: 'Jin',
fullname: ''
}
}
},
watch: {
person: {
handler(n,o){
this.person.fullname = n.firstname + ' ' + this.person.lastname;
},
// immediate: true,  //刷新加载 立马触发一次handler
// deep: true  // 可以深度检测到 person 对象的属性值的变化
}
}

}
</script>

<!--<p>FullName: {{person.fullname}}</p>  输出结果：Menghui Jin-->