方法一：
当监听某一属性的变化时，建议直接使用函数写法
const vm = new Vue({
el:'#app',
data:{
username:''
},
watch:{
username(newVal,oldVal){
console.log(newVal,oldVal)
}
}
})
方法二：
当页面初始化需要监听一次或者监听对象是对象时，使用对象写法
const vm = new Vue({
el:'#app',
data:{
info:{
username:''
}
},
watch:{
username:{
handler(newVal,oldVal){
console.log(newVal,oldVal)
},
immediate:true,//表示页面初次渲染好之后，就立即触发当前的watch监听器，默认false,
deep:true, //深度监听对象中每一个字段变化
}
}
})
若只想监听对象中某个字段的变化，可以直接取对应的字段进行监听，如下：
watch:{
'info.username':{
handler(newVal,oldVal){
console.log(newVal,oldVal)
}
}
}