Vue.js
पर नजर रखने वालों

यह काम किस प्रकार करता है

आप किसी भी Vue उदाहरण की डेटा संपत्ति देख सकते हैं। प्रॉपर्टी देखते समय, आप बदलाव के लिए एक विधि को ट्रिगर करते हैं:

export default {
    data () {
        return {
            watched: 'Hello World'
        }
    },
    watch: {
        'watched' () {
            console.log('The watched property has changed')
        }
    }
}

आप पुराना मान और नया प्राप्त कर सकते हैं:

export default {
    data () {
        return {
            watched: 'Hello World'
        }
    },
    watch: {
        'watched' (value, oldValue) {
            console.log(oldValue) // Hello World
            console.log(value) // ByeBye World
        }
    },
    mounted () {
        this.watched = 'ByeBye World'
    }
}

यदि आपको किसी ऑब्जेक्ट पर नेस्टेड गुण देखने की आवश्यकता है, तो आपको deep संपत्ति का उपयोग करने की आवश्यकता होगी:

export default {
    data () {
        return {
            someObject: {
                message: 'Hello World'
            }
        }
    },
    watch: {
        'someObject': {
            deep: true,
            handler (value, oldValue) {
                console.log('Something changed in someObject')
            }
        }
    }
}

डेटा कब अपडेट किया जाता है?

यदि आपको ऑब्जेक्ट में कुछ नए बदलाव करने से पहले वॉचर को ट्रिगर करना है, तो आपको nextTick() विधि का उपयोग करने की आवश्यकता है:

export default {
    data() {
        return {
            foo: 'bar',
            message: 'from data'
        }
    },
    methods: {
        action () {
            this.foo = 'changed'
            // If you juste this.message = 'from method' here, the watcher is executed after. 
            this.$nextTick(() => {
                this.message = 'from method'
            })
        }
    },
    watch: {
        foo () {
            this.message = 'from watcher'
        }
    }
}