使用watc函数,可以监听某个数据的状态。当这个数据被修改时,则会去调用我们写好的回调函数。
例子:
<template>
<div>
{{name}}
</div>
</template>
<script>
export default {
data(){
return{
name : 'tom'
}
},
created(){
setTimeout(()=>{
this.name = 'marry';
},2000);
},
watch:{
name(newV,oldV){
console.log('name被改变了,新的值是' + newV + "---" + '旧的值是' + oldV);
}
}
}
</script>
监听对象属性
监听对象属性发生变化,则需要在watch函数中传入 deep : true,代表深度监听。(上面的例子称为浅度监听)
例子:
<template>
<div>
{{people.name}} {{people.age}}
</div>
</template>
<script>
export default {
data(){
return{
people : {
name : "tom",
age : 18
}
}
},
created(){
setTimeout(()=>{
this.people.age = 20;
},2000);
},
watch:{
"people.age" : {
deep:true,
handler:(newV,oldV)=>{
console.log('age被改变了,新的值是' + newV + "---" + '旧的值是' + oldV);
}
}
}
}
</script>