[Vue.js] Watch 사용 방법

watch 속성은 '지켜보다'라는 의미를 가지고, data 혹은 computed 속성의 데이터 값이 변경될 때 실행되는 속성이다.

 

<div id="app">
    <div>{{ msg }}</div>
    <div>{{ msgReversed }}</div>
</div>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg: 'abc'
        },
        
        computed: {
            msgReversed : {
                get () {
                    return this.msg.split('').reverse().join('')
                },
                
                set (value) {
                    this.msg = value
                }
            }  
        },

        watch: {
            msg (newMsg) {
                //data -> msg 데이터가 변경될 때 실행
                console.log('New msg: ' + newMsg)
            },

            msgReversed (newMsg) {
                //computed -> msgReversed 데이터가 변경될 때 실행
                console.log('New msgReversed: ' + newMsg)
            }
        }
    })
</script>

 

결과 실행 :

 

watch 속성에 msg 와 msgReversed 메소드를 만들어놓은 것을 볼 수 있고,

같은 이름의 data, computed 속성의 data 들이 변경될 때 각 이름에 해당하는 watch 메소드 들이 실행된다는 것을 알 수 있다.

 

kr.vuejs.org/v2/guide/computed.html

computed와 watch — Vue.js