vue中watch的用法

 watch是vue实例的一个属性，主要用来监听数据的变化，并做出一些操作。

1.简单数据类型的使用，主要是针对于简单的数据类型，例如字符串、数字、布尔类型等数据类型。

data() {
   
    return {
   
     userName: "李赫尔南"       
    }
},
watch: {
   
    userName:{
   
        handler(newValue, oldValue){
   
        console.log("旧值：", oldValue)//改变之前的值
        console.log("新值：", newValue)//改变之后的值
    }
}

2.复杂数据类型的使用
 2.1 监听对象中某个属性的变化

data() {
   
    return {
   
        userInfo: {
   
             userName: "李赫尔南",
             age: 18
         }  
    }
},
watch: {
   
    //监听多级结构中某个属性的变化
    //当userInfo中的userName属性发生变化时就会执行handler
    'userInfo.userName':{
   
        handler(newValue, oldValue){
   
            console.log("旧值：", oldValue)//改变之前的值
            console.log("新值：", newValue)//改变之后的值
        }
    }
}

 2.2 监听对象中所有属性的变化，使用deep属性可以监测到整个对象所有值的变化。

data() {
   
    return {
   
        userInfo: {
   
             userName: "李赫尔南",
             age: 18
         }  
    }
},
watch: {
   
    userInfo:{
   
        handler(newValue, oldValue){
   
            console.log("旧值：", oldValue)//改变之前的值
            console.log("新值：", newValue)//改变之后的值
        },
        deep:true
    }
}