watch是vue实例的一个属性，主要用来监听数据的变化，并做出一些操作。
- 简单数据类型的使用，主要是针对于简单的数据类型，例如字符串、数字、布尔类型等数据类型。
data() {
return {
userName: "李赫尔南"
}
},
watch: {
userName:{
handler(newValue, oldValue){
console.log("旧值：", oldValue)//改变之前的值
console.log("新值：", newValue)//改变之后的值
}
}
- 复杂数据类型的使用
2.1 监听对象中某个属性的变化
data() {
return {
userInfo: {
userName: "李赫尔南",
age: 18
}
}
},
watch: {
//监听多级结构中某个属性的变化
//当userInfo中的userName属性发生变化时就会执行handler
'userInfo.userName':{
handler(newValue, oldValue){
console.log("旧值：", oldValue)//改变之前的值
console.log("新值：", newValue)//改变之后的值
}
}
}
2.2 监听对象中所有属性的变化，使用deep属性可以监测到整个对象所有值的变化。
data() {
return {
userInfo: {
userName: "李赫尔南",
age: 18
}
}
},
watch: {
userInfo:{
handler(newValue, oldValue){
console.log("旧值：", oldValue)//改变之前的值
console.log("新值：", newValue)//改变之后的值
},
deep:true
}
}
