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'
        }
    }
}