<template>
<div class="about">
<p>about</p>
<span>{{obj.name}}</span>
<button @click="handleName">改名</button>
</div>
</template>
<script>
export default {
data(){
return{
obj:{
name:"告白气球",
age:18
}
}
},
methods:{
handleName(){
this.obj.name='夏天的风'
}
},
watch:{
obj:{
handler(newValue, oldValue) {
console.log(newValue,oldValue)
},
deep: true,
immediate:true
}
}
}
</script>
总结:immediate:true 表示 watch 声明了 obj 后 就立即执行 handler 方法
deep 为 true 代表深度监听
上面这种写法是给 对象的 所有属性都加上了这个监听器,开销大
某个属性修改了都会触发这个监听器,可以使用如下方法
watch:{
'obj.name':{
handler(newValue, oldValue) {
console.log(newValue,oldValue)
},
deep: true,
immediate:true
}
}