vue中的watch监听

watch（侦听器，监听）

watch监听，监听数据的变化
一、浅监听
它可以监听字符串、普通数组的变化
watch:{
    val(newVal,oldVal){
        //实时监控数据的变化
    }
}
二、深度监听
可以监听到对象的变化，还可以复杂数组
watch:{
    对象：{
        deep:true,//深度
        handler(新值newVal){
            //可以实时监听到新值newVal的变化
        }
    }
}

浅监听

<input type="text" v-model='food[1]'>{{food[1]}}
​
                watch:{
                    food(newVal,oldVal){
                        console.log(newVal,'new')
                        console.log(oldVal,'old')
                    },
                    }

深度监听

        <input type="text" v-model='obj.name'>{{obj.name}}
        <hr>
        <input type="text" v-model='songList[0].name'>{{songList[0].name}}
        watch:{
                        obj:{
                    deep:true,//deep 深度
                    handler(newVal){
                        console.log(newVal,'new')
                        console.log(newVal.name,'new')
                    }
                },
                songList:{
                   deep:true,
                   handler(newVal){
                    console.log(newVal[0].name,'new')
                   }
                },
            }
                      
深度监听可能会造成页面卡顿，非必要尽量少的去使用