vueでのwatchリスニングプロパティの詳細

使用方法:

watch:{
 data(val, newval) {
        console.log(val)
        console.log(newval)
    }
}

(2)watchでdocDataデータの変化を傍受し、データが変化した場合、this.change_number++(深度リスニングを使用)

watch: {
    docData: {
        handler(newVal) {
            this.change_number++
        },
        deep: true
    }
}      

watchでdataデータの変化を傍受し、データが変化した場合にchangeDataメソッドを実行する

watch: {
    data： 'changeData' //     methods    
}，
methods: {
    changeData(curVal,oldVal){
　　　conosle.log(curVal,oldVal)
　 }
}

2、watchのimmediate、handler、deep属性(1)immediate、handlerのようにwatchを使用する場合、値が最初にバインドされたときにリスニング関数が実行されず、値が変更されたときにのみ実行されるという特徴があります.最初に値をバインドするときに関数を実行する必要がある場合は、immediateプロパティを使用する必要があります.

watch: {
    docData: {
        handler(newVal) {
            this.change_number++
        },
        immediate: true
    }
}    

(2)deepオブジェクトの変更を傍受する必要がある場合,通常のwatchメソッドではオブジェクト内部の属性の変更を傍受できないため,deep属性がオブジェクトを深く傍受する必要がある.

data（） {
    return {
        docData: {
            'doc_id': 1,
            'tpl_data': 'abc'
        }
    }
}，
watch: {
    docData: {
        handler(newVal) {
            this.change_number++
        },
    deep: true
    }    
}