current position:Home>Watch data monitoring in Vue and detailed explanation of various attributes in watch

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

2022-04-29 07:26:03MFG_ six hundred and sixty-six

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 !!!

copyright notice
author[MFG_ six hundred and sixty-six],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204290458555866.html

Random recommended