Watch data monitoring in Vue and detailed explanation of various attributes in watch

vue in watch Main monitor data Medium is Array , object Of Value change

1、watch Several methods used

（1） adopt watch monitor data Data change , When the data changes , The current value will be printed

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

（2） adopt watch monitor docData Data change , When the data changes ,this.change_number++（ Use deep listening ）

watch: {
    
    data： 'changeData' //  The value can be methods Method name of 
},
methods: {
    
    changeData(curVal,oldVal){
    
　　　conosle.log(curVal,oldVal)
　 }
}

2、 Detailed explanation watch Medium immediate、handler and deep attribute

（1）immediate and handler
Use this way watch There is a characteristic when , When the value is bound for the first time , No listening function will be executed , Only when the value changes will it execute . If we need to first The function is also executed when binding values , Then need be used immediate attribute .
for example ：

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

（2）deep
When you need to Listen for changes to an object when , ordinary watch Method cannot listen for changes in the internal properties of an object , At this point, we need deep attribute Deep listening to objects .

for example ：

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

Set up deep:true You can listen docData.doc_id The change of , It will be given at this time. docData Add this listener to all properties of the , When There are many object attributes when , Every property value change is performed handler. If You only need to listen for one attribute value in the object , You can do the following optimization ： Listen for object properties in the form of strings ：

for example ：

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

The listener will only add such attributes to a specific object

3、 summary

Array （ A one-dimensional 、 Multidimensional ） The change of Unwanted Through deep monitoring , object If the properties of the objects in the array change need deep Deep monitoring .

If you feel the article is good, remember to pay attention and collect , If there is something wrong, please correct it , If you need to reprint , Please indicate the source , Thank you very much ！！！