Vue-Vue的监视属性

1.理解

监视属性watch:

1.当被监视的属性变化时，回调函数自动调用，进行相关操作

2.监视的属性必须存在，才能进行监视

3.监视的两种写法:

​ 1.new Vue时传入watch配置

​ 2.通过vm.$watch监视

格式:

    watch:{
        xxx:{
            hander(newValue,oldValue){
                xxxxx
            }
        }
    }

2.案例

1.基本属性

接下来我们通过一个修改天气的案例来观察监视属性

<div id="app">
       <p>今天的天气炎热吗?{{isHot}}p> 
       <button @click="isHot=!isHot">修改isHotbutton>
    div>

 const vm = new Vue({
        el:'#app',
        data:{
            isHot:true
        },
        methods:{
           
        },
        watch:{
                isHot:{
                    handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue);
                    } 
                }
               
            }
    })

当我们点击“修改isHot”的按钮时,

控制台会弹出以下信息,说明监察属性的handler函数被触发了

handler函数中的形参newValue表示的时当前监察属性的新值，oldValue表示的时当前监察属性的旧值

例如我们的isHot初始值是true，那么我们第一次触发函数时，newValue就是false,oldValue是true

2.监视属性监视计算属性

通过以上案例我们可以知道，监视属性可以为data中定义的参数，但如果是计算属性呢，我们可以监视吗？

 <div id="app">
       <p>今天的天气是?{{info}}p> 
       <button @click="isHot=!isHot">修改isHotbutton>
    div>

const vm = new Vue({
        el:'#app',
        data:{
            isHot:true
        },
        methods:{
          
        },
        computed:{
            info(){
            return this.isHot?'炎热':'凉爽'
            }
        },
        watch:{
                info:{
                    handler(newValue,oldValue){
                    console.log('info被修改了',newValue,oldValue);
                    } 
                }
               
            }
    })

点击按钮

我们可以得出结论:vue监视属性可以监视计算属性

3.监视属性中的深度监视

我们设想这么一个案例，有一个对象number

number：{a:1,b:1}

我们想要修改a或者修改b时，监视属性都能监测到，怎么实现呢?

<div id="app">
       <h3>a的值是:{{number.a}}h3>
       <button @click="number.a++">点我让a+1button>
       <h3>b的值是:{{number.b}}h3>
       <button @click="number.b++">点我让b+1button>
    div>

const vm = new Vue({
        el:'#app',
        data:{
            number:{
                a:1,
                b:1
            }
        }, 
        watch:{
                number:{
                    handler(){
                    console.log('number被修改了');
                    } 
                }
               
            }
    })

我们监听number属性,如果控制台有输出，就可以说明number被成功监听到了是吧?

我们看控制台

当我们让a+1时

a的值的确改变了,但是控制台没有任何输出

这是为什么呢？

这是因为我们监听的是number属性，而a是number对象中的属性,vue只会默认监听number这个属性，如果我们要往number内部监听，我们需要在属性中添加deep配置为true

 watch:{
                number:{
                    deep:true,//配置deep为true后，vue会进行深度监听
                    handler(){
                    console.log('number被修改了');
                    } 
                }
               
            }

我们配置之后再看控制台

成功监听到a

这就是深度监视