运用场景
当项目中某个值发生变化时，想执行对应的方法或者时刻获取最新的值，此时就需要用到watch方法
常规用法
当值发生变化直接执行定义在methods中的方法，这种写法，只有当值value发生变化时，才会执行方法，第一次默认绑定值时不会执行changeValue函数；
data(){
return{
value:''
}
}
watch:{
value:'changeValue'
},
methods:{
changeValue(){
console.log('当value值发生变化时执行这个方法')
}
}
data(){
return{
value:''
}
}
watch:{
value:'changeValue'
},
methods:{
changeValue(){
console.log('当value值发生变化时执行这个方法')
}
}
2.使用immediate和handler方法，如果不写immediate属性，则跟第一种写法一样,value绑定默认值第一次不会执行，当加上immediate=true时，此时watch对value的默认值也进行了监听，在初始绑定值时也执行下面的方法
data(){
return{
value:''
}
}
watch:{
'value':{
immediate: true,
handler(newValue,oldValue){
this.changeValue();
}
}
},
methods:{
changeValue(){
console.log('当value值发生变化时执行这个方法')
}
}
data(){
return{
value:''
}
}
watch:{
'value':{
immediate: true,
handler(newValue,oldValue){
this.changeValue();
}
}
},
methods:{
changeValue(){
console.log('当value值发生变化时执行这个方法')
}
}
3.深度监听，有时候会遇到当value是个对象时，有多层数据结构，当下面层级的属性发生变化时，普通写法watch是监听不到变化，这时需要加上deep属性；
data(){
return{
value:''
}
}
watch:{
'value':{
immediate: true,
deep: true,
handler(newValue,oldValue){
this.changeValue();
}
}
},
methods:{
changeValue(){
console.log('当value值发生变化时执行这个方法')
}
}
data(){
return{
value:''
}
}
watch:{
'value':{
immediate: true,
deep: true,
handler(newValue,oldValue){
this.changeValue();
}
}
},
methods:{
changeValue(){
console.log('当value值发生变化时执行这个方法')
}
}
watch不仅仅只监听页面内定义的值的变化，还能监听props、vuex中状态值的变化。
