[Vue.js] computed vs watch 속성

 

새삼 생각나는 코딩테스트 때 watch 남발했다가 '왜 이렇게 쓰신거예요?'라는 물음에 놀라고 제대로 개념 잡힌 기억..(🥲)

watch는 어떤 때에 쓰는 것이며, 성능에 어떤 영향을 미치는지 매우 친절히 설명해주셔서 그 뒤로는 plan B로 사용하게 됐다.

 

예전에 내가 짠 코드를 보면 왜 그렇게, 왜 그곳에서 써야하는지 명확한 이유도 없이 마구잡이로 사용했었다.

물론 지금도 100% 적절하게 쓴다고 확신할 수는 없지만 그래도 함수 하나, 데이터 하나를 선언할 때도 과연 적절한 옵션에서 사용하고있는건지 고민해보고 판단하는 단계까지는 왔다.

 

 

 

---

 

 

◽ computed

• 계산해야하는 목표데이터를 정의하는 방식으로, 선언적 프로그래밍 방식이다.
• computed 속성은 해당 속성이 종속된 대상이 변경될 때만 실행되며 캐싱된다. 예를 들어 아래의 reverseMessage()의 경우 종속되어있는 this.message의 값이 바뀌지 않는 한 계속 호출하더라도 이미 계산되어 있는 값을 리턴한다.
• computed 대신에 methods hook에서 함수를 선언하여 호출해도 되지만 함수의 경우 렌더링될 때 마다 호출되기 때문에 비효율적일 수 있다.
• computed를 사용할 때의 주의사항으로는 계산된 결과를 리턴하는 것 외에 사이드 이펙트를 부르는 코드는 지양하는 것이 좋다.

export default {
    computed: {
    	// return 형식으로 작성해야 한다.
        // 표현식에서 {{ reverseMessage() }}로 호출할 수도 있다.
        reversedMessage() {
            return this.message.split('').reverse().join('')
        },
        
        // getter, setter를 선언
        testValue: {
            get() {
            	// getter
            },
            set(val) {
            	// setter
            }
        }
    }
}

 

 

◽ Watch

• 데이터가 바뀌면 함수를 실행하는 방식으로, 명령형 프로그래밍 방식이다.
• 보통은 computed가 더 적합하지만, watch가 더 적합하게 사용될 때도 있다. 예를 들어, watch는 어떤 프로퍼티의 변경시점에 어떤 액션(call api, push route …)을 취하고자 할때 적합하다. watch 옵션을 사용하면 비동기 연산을 수행하고, 최종 response가 오기 전 중간에 실행할 동작을 설정할 수도 있다. (computed 속성은 이러한 기능을 수행할 수 없다.)

export default {
    watch: {
        question(newQuestion) {
            this.answer = '입력을 기다리는 중...'
            this.debouncedGetAnswer()
        }
    },
}

 

 

 

출처

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

[Vue.js] watch와 computed 의 차이와 사용법

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.