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
    }
}