[Vue.js] - Vue computed와 watch 사용해서 데이터 변경 감지 하는 방법

#Vue.js 데이터 감지 API

Vue.js는 데이터 변화를 감지하고 이에 대한 반응을 정의할 수 있는 computed와 watch API를 제공합니다. computed와 watch API를 사용하면 데이터의 변화를 감지하고, 이에 대한 적절한 처리를 할 수 있습니다. 예를 들어, 특정 데이터가 변경될 때마다 화면을 다시 그리거나, 다른 데이터를 업데이트하는 등의 작업을 할 수 있습니다. 

 

 

#Vue computed란?

Vue의 computed는 데이터를 계산하고, 감시하며, 캐싱하는 속성입니다. 즉, computed 속성은 모델의 상태 변화에 따라 동적으로 계산된 값을 제공합니다.

Computed 속성은 연산이 필요한 데이터를 정의할 때 사용됩니다. Computed 속성은 일반적으로 템플릿에서 나타내는 데이터를 계산하고 캐싱합니다. Computed 속성은 다른 데이터 속성을 기반으로 하며, 이 데이터 속성이 변경될 때만 업데이트됩니다.

Computed 속성은 템플릿에서 메서드를 호출하는 것과 유사하지만, 캐싱된 값으로 여러 번 호출될 수 있습니다. 즉, computed 속성은 계산 비용이 많이 드는 메서드를 대체할 수 있으며, 코드의 가독성과 유지 보수성을 향상시킵니다.

Computed 속성을 정의할 때, 접근자(getter) 함수만 정의하면 됩니다. 이 함수는 computed 속성의 값을 계산하고 반환합니다. 데이터 속성을 감시하려면, computed 속성 내에서 해당 속성을 참조하면 됩니다.

 

 

#Vue watch란?

Vue의 watch는 데이터의 변화를 감지하고, 그에 대한 반응을 정의하는 기능입니다. watch를 사용하면 특정 데이터의 변경을 감시하고, 해당 데이터가 변경될 때 실행되는 콜백 함수를 정의할 수 있습니다.

watch를 사용하여 데이터를 감시하면, 데이터가 변경될 때 원하는 동작을 수행할 수 있습니다. 예를 들어, 특정 데이터가 변경되면 API 요청을 보내거나, 다른 데이터를 업데이트하거나, 화면을 다시 그리는 등의 작업을 수행할 수 있습니다.

watch는 Vue 인스턴스의 옵션으로 정의되며, 데이터 속성 이름과 해당 속성이 변경될 때 실행되는 콜백 함수를 매핑합니다. 콜백 함수는 변경된 값과 이전 값에 대한 정보를 매개변수로 받아 사용할 수 있습니다.

 

 

#Vue computed watch 차이점

Vue의 computed와 watch는 모두 데이터의 변화를 감시하고, 이에 대한 반응을 정의하는 기능입니다. 하지만 두 기능의 차이점은 다음과 같습니다.

computed는 계산된 속성으로, 데이터를 계산하고 감시하며, 캐싱하는 속성입니다. computed 속성은 모델의 상태 변화에 따라 동적으로 계산된 값을 제공하며, 일반적으로 템플릿에서 나타내는 데이터를 계산하고 캐싱합니다. computed 속성은 다른 데이터 속성을 기반으로 하며, 이 데이터 속성이 변경될 때만 업데이트됩니다.

반면, watch는 데이터를 감시하고, 해당 데이터가 변경될 때 실행되는 콜백 함수를 정의하는 기능입니다. watch를 사용하여 데이터를 감시하면, 데이터가 변경될 때마다 원하는 동작을 수행할 수 있습니다. watch는 데이터 속성의 변경을 감지하며, computed와 달리 캐싱하지 않습니다.

따라서, computed는 데이터를 계산하고 캐싱하는 데 사용되며, watch는 데이터의 변경을 감시하고 콜백 함수를 실행하는 데 사용됩니다. 두 기능은 서로 보완적이며, 필요에 따라 적절하게 사용할 수 있습니다.

 

 

#Vue.js computed 사용법

-Vue.js 코드

<template>
    <h1>Full Name : {{ fullName }}</h1>
</template>

<script>
    export default {
        data() {
            return {
                firstName: 'Minsu',
                lastName: 'Kim'
            }
        },
        computed: {
            fullName() {
                return this.firstName + ' ' + this.lastName;
            }
        }
    }
</script>

 

-Vue.js computed 테스트

computed로 정의하면 fullName 함수가 실행되어 데이터 fullName에 firstName과 lastName을 합한 값이 할당됩니다.

firstName이나 lastName의 값 중 하나라도 변경이 일어나면 fullName 함수가 자동으로 실행되고 fullName 값이 갱신됩니다.

 

 

#Vue.js watch 사용법

 

-Vue.js 코드

<template>
    <h1>Full Name : {{ fullName }}</h1>
    <button type="button" @click="changeName">변경</button>
</template>

<script>
    export default {
        data() {
            return {
                firstName: 'Minsu',
                lastName: 'Kim',
                fullName: ''
            }
        },
        watch: {
            firstName() {
                this.fullName = this.firstName + ' ' + this.lastName;
            },
            lastName() {
                this.fullName = this.firstName + ' ' + this.lastName;
            }
        },
        methods: {
            changeName(){
                this.firstName = 'Minho';
            }
        }
    }
</script>

 

-Vue.js watch 테스트

watch의 경우 초기에 할당된 값의 변경이 있을 경우 정의한 함수를 실행합니다.

 

-변경 버튼 클릭 전

-변경 버튼 클릭 후