Vue의 computed, watch, methods

computed, watch, methods 는 Vue 인스턴스가 가질 수 있는 속성들입니다. 이 3가지 속성은 Vue의 중요한 특징이자 자주 쓰이는 기능들이기 때문에 정리했습니다.

computed

Vue 인스턴스의 data 속성은 해당 인스턴스에서 사용할 수 있는 변수들이고 항상 data binding 되어 있습니다.

computed도 data binding 되어 있는 변수라는 점에서 공통점이 있지만, computed는 항상 up-to-date 하다는 특징이 있습니다.

<div id="app">
    <p></p>
    <p></p>
</div>
        
<script>
new Vue({
    el: '#app',
    data: {
        message: 'This is message.'
    },
    computed: {

        reversedMessage: function() {
            return this.message.split('').reverse().join('');
        }

    }
});
</script>

위의 코드를 보면, computed 속성 안에서 reversedMessage를 함수로써 정의했습니다. 그리고 reversedMessage는 this.message를 뒤집은 값을 반환하고 있습니다.

이렇게 정의된 computed 변수는 이 인스턴스에서 data 변수와 동일하게 사용할 수 있지만, this.message의 값이 변경된다면, 항상 그에 맞춰 업데이트된다는 특징이 있습니다.

watch

watch 속성은 어떤 변수의 값이 변경되었을 때 자동으로 호출할 함수를 정의할 때 사용됩니다.

<div id="app">
    <input v-model="message">
</div>
        
<script>
new Vue({
    el: '#app',
    data: {
        message: 'This is message.'
    },
    watch: {

        message: function(data) {
            console.log(data);
        }

    }
});
</script>

위 예시에서는 input에 data의 message가 바인딩되어 있습니다. 따라서 사용자가 input을 수정하면 message값도 업데이트 됩니다.

이때, watch 속성에서 message에 어떤 함수를 정의했습니다. 이 함수는 data의 message값이 변경될 때 마다 호출됩니다. 이 함수의 파라미터인 data는 message의 값 입니다. 따라서, 사용자가 input을 수정할 때 마다 console.log(data)가 실행됩니다.

methods

methods는 해당 Vue 인스턴스에서 사용할 함수들을 정의하는 곳 입니다.

<div id="app">
    <p></p>
    <button v-on:click="reverseMsg">Reverse Message</button>
</div>
        
<script>
new Vue({
    el: '#app',
    data: {
        message: 'This is message.'
    },
    methods: {

        reverseMsg: function() {
            this.message = this.message.split('').reverse().join('');
        }

    }
});
</script>

위 코드에서는 reverseMsg라는 함수를 정의했습니다. 이 함수는 this.message의 값을 반전시키고 다시 저장하는 함수입니다. DOM 요소인 button을 누르면 reverseMsg 함수를 호출하도록 했기 때문에, button을 누를 때 마다 message 값이 바뀌는 것을 확인할 수 있습니다.