vue watch深入了解

vue动态监听一个属性，可以使用watch，

1.基本类型的监听，使用方法如下：

export default {
    data(){
        return {
            name:''
        }
    },
    watch:{
        name(val,oldval){
            // 逻辑代码
        }
    }
}

2.复杂类型监听：

  2.1监听复杂对象的时候，需要将deep设置为true，表示深入监听，数组同理

export default {
    data(){
        return {
            user:{
                name:'',
                age:''
            }
        }
    },
    watch:{
        user:{
            handler(val, oldval){
                // 逻辑代码
            },
            deep:true // 深度监听
        }
    }
}
 

2.2 复杂对象监听，其中某个参数修改，就会触发监听，所以有时候不需要监听整个对象，只监听对象重的某个属性

export default {
    data(){
        return {
            user:{
                name:'',
                age:''
            }
        }
    },
    watch:{
        "user.name":{
            handler(val, oldval){
                // 逻辑代码
            }
        }
    }
}
 

3.immediate属性,这个属性表示在组件创建的时候先跑一次这个监听函数

  注意点：当该属性存在时，函数会比created这个生命周期函数先运行

export default {
    data(){
        return {
            user:{
                name:'',
                age:''
            }
        }
    },
    watch:{
        user:{
            handler(val, oldval){
                // 逻辑代码
            },
            immediate:true
        }
    }
}

如果不想让添加了immediate的watch在created之前执行怎么办呢？可以将watch写到created中的最后

created() {
    this.$wathc(
        '需要监听的值',
        (val, oldval) => {},
        { deep: true} // 深度监听，当监听的值为对象时添加
    )    
}