文本转自于：https://blog.csdn.net/weixin_46376652/article/details/125689307 作者：frontEndSmallWhite

一、两种监视方式

1、watch属性直接监视

如果刚开始确定监视对象，在vue中可以直接使用watch属性实现监视

watch:{
            //正常写法
            Info:{
                immediate:true,
                handler(newValue,oldValue){
                    console.log("Info被修改了，原来的天气是",oldValue,"，现在的天气是",newValue)
                }
            }
 
            //简写形式
            // Info(newValue,oldValue){
            //     console.log("Info被修改了，原来的天气是",oldValue,"，现在的天气是",newValue)
            // }
}

handler函数

监视属性中的函数，能够通过获取newValue和oldValue的值，进行监视到属性改变后的一些操作；

接收两个参数：

newValue：表示新的值

oldValue：表示改变前的值

immediate属性：实现初始化的时候调用一次监视函数handler，默认为false

2、vm.$watch

如果刚开始不确定监视的对象，就可以后续再使用这个实现监视 

//另一种写法，在vm外使用$调用
vm.$watch("Info",{
        handler(newValue,oldValue){
            console.log("Info被修改了，原来的天气是",oldValue,"，现在的天气是",newValue)
        }
})

二、深度监视

watch默认监视单层属性的改变，想实现监测多层结构需要使用deep属性

监视多级结构中某个属性的变化

watch:{ "numbers.a":{ ... } } //numbers是data上的一个key，里面包含a

注意：本来所监视的属性都是字符串，需要带双引号，只不过单层的省略了双引号

deep属性

用于开启深度监视，多级结构中任何一个属性值发生变化，都能够检测到（内部的改变也能够通过外部监测到），监视多级结构中所有属性的变化

watch:{
            'numbers.a':{
                handler(){
                    console.log("numbers中的a改变了")
                }
            },
            numbers:{
                // 开启深度监视
                deep:true,
                handler(){
                    console.log("numbers改变")
                }
            }
}

三、监视属性的简写形式

与计算属性类似，当不需要使用其他属性，只使用handler属性时，可以使用简写形式

//简写形式
Info(newValue,oldValue){
     console.log("Info被修改了，原来的天气是",oldValue,"，现在的天气是",newValue)
}