一篇文章讲解清楚watch监听器

一，单个变量

<template>
<div class="hello">
<input type="text" v-model="mes">
</div>
</template>

<script>
export default {
name: 'HomeIndex',
data(){
return{
mes:""
}
},
watch:{
mes(newValue,oldValue){
console.log(newValue + ' ' + oldValue)
}
}
}
</script>

<style scoped>

</style>

二，单个对象

<template>
<div class="hello">
<input type="text" v-model="obj.username">
</div>
</template>

<script>
export default {
name: 'HomeIndex',
data(){
return{
obj:{
username:''
}
}
},
watch:{
'obj.username'(newValue,oldValue){
console.log(newValue + ' ' + oldValue)
}
}
}
</script>

<style scoped>

</style>

三，对象多个值

<template>
<div class="hello">
<input type="text" v-model="obj.username"> <br><br>
<input type="text" v-model="obj.age">
</div>
</template>

<script>
export default {
name: 'HomeIndex',
data(){
return{
obj:{
username:'',
age:''
}
}
},
watch:{
obj:{
deep:true,
handler(newValue){
console.log(newValue.username,newValue.age)
}
}
}
}
</script>

<style scoped>

</style>