vue中的watch

1、监听普通数据：test1发生改变时执行函数

<el-input v-model="test1"></el-input>
data() {
        return {
            test1:'',
       }
},
watch:{
		test1(val,oldVal){
            console.log(val,oldVal)
        },
}

2、监听对象：监听对象的改变需要deep深度监视；监听对象属性，键名为字符串形式。

<el-input v-model="test2"></el-input>
data() {
        return {
            test:{
                test2:''
            },
       }
},
watch:{
		// 对象
		test:{
            handler:function(val){
                console.log(val')
            },
            deep:true
        },
        // 对象的值
        'test.test2':function(val,oldVal){
            console.log(val,oldVal)
        },
}

3、立即执行：初次绑定值的时候执行函数，需要用到immediate属性。

<el-input v-model="test3"></el-input>
data() {
        return {
            test3:'',
       }
},
watch:{
		test3:{
            handler(val,oldVal){
                console.log(val,oldVal)
            },
            immediate:true
        },
}