vue的watch属性

vue的watch属性

概述：watch属性可以时刻检测数据是否发生了改变

注意：当检测的是一个对象或者数组的时候，需要进行深度监听。

例子

<template>
    <div class="listen">
        <el-input v-model="message"></el-input>
        <el-input v-model="object.key1"></el-input>
        <el-input v-model="object.key2"></el-input>
    </div>    
</template>
<script>
export default {
    data(){
        return{
            message: '',
            object:{
                key1: '',
                key2: '',
                key3: ''
            }
        }
    },
    methods:{
        test(curVal,oldVal){
            console.log(curVal + " function " + oldVal); //这里的curVal和oldVal是不同的
        }
    },
    watch:{
        message(curVal,oldVal){
            console.log(curVal + " " + oldVal); //这里的curVal和oldVal是不同的
        },
        //或者也可以直接绑定方法
        message: 'test',
        //对于对象和数组的话，需要深度监听
        object:{
            handler(value,oldVal){
                alert(value.key1 +" 相同的值 "+oldVal.key1); //这里两者的值是相同的，因为指向的是同一个对象
            },
            deep:true
        }

    }

}
</script>
<style scoped>

</style>