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

这就是深度监视

你可能感兴趣的:(VueStudy,vue)