vue watch监听数据更新

vue watch用于监听组件props、data数据。当监听的数据发生改变时，就会触发watch设置的回调函数。watch是一个对象，键名是被监听的数据名称，值可以是回调函数，也可以是一个包含选项的一个对象。回调函数有两个参数，第一个参数是改变后的值，第二个参数是改变前的值。

下面是几种监听的方法。

基本使用

一般情况下的用法。下面监听传递给组件的list属性值，如属性值发生改变时，watch里面的list就会监听到被修改的值，随后更新组件内的视图。

props:{
    list:{type:Array}
},
    
watch:{
    //第二个参数不需要时，可以不用填。
    list(newVal ,oldValue){
        //监听组件props的list，发生改变时就会调用它
    }
}

多层数据嵌套

如果list数据是多层嵌套的结构，watch就需要使用对象形式并且设置deep:true监听多层嵌套数据的变化。因为数据层级太深，watch无法监测层级太深的数据变化，通过设置deep:true，不论嵌套多深，当属性改变时，handler回调都会被调用，并且拿到更新的数据。

data(){
    list:[
        {
            id:1,
            name:'四川',
            children:[
                {
                    id:'1000200',
                    name:'成都',
                    children:[
                        {
                            id:10101010,
                            name:'锦江区'
                        }
                    ]
                }
            ]
        }
    ]
},
watch:{
    //监听对象的属性改变时被调用，不论其被嵌套多深
    list:{
        handler(newVal,oldVal){
            
        },
        deep:true 
    },
   
   'list.children':function(val){
       
   }
}

立即调用

对象属性监听开始之后被立即调用。immediate:true 设置为true时，表明不管list数据有没有更新，都会先执行一次handler回调函数。

watch:{
    //该回调将会在侦听开始之后被立即调用
    list:{
        handler(newVal,oldVal){
            
        },
        immediate:true 
    }
}

指定方法

当监听的list数据发生改变时，执行指定的setList函数。

 watch:{
     list: 'setList',
 },
 methods:{
     setList(val) {
         
     }
 }

注意：监听函数不能使用箭头函数。因为箭头函数绑定父级作用域的上下文，所以this不会指向vue实例。