computed란?
반응형 getter와 같은 역할을 수행한다.
템플릿을 보다 직관적으로 표현하기 위해 사용
data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산해준다.
computed vs methods
템플릿에서 data를 직관적으로 표현하기 위해 사용 한다면 methods와의 차이는 무엇일까?
공통점1
data값이 변경되었을때 양쪽 다 재호출이 일어난다.
공통점2
데이터 변동이 없는 상태라면 양쪽 다 재호출이 일어나지 않았다.(아마도 캐쉬하는듯)
vue.js computed와 methods의 차이라는 블로그에서
데이터 변동이 없는 상태에서 computed는 이전의 계산된 값을 캐시해 두었다가 함수 호출시 다시 쓰게 된다. 반면 methods는 사용될 때마다 함수의 계산을 다시 하게 된다.
이런 문구가 있는데 필자의 테스트 결과 methods,computed양쪽 다 캐쉬하는듯하다.
차이1 호출방법이 틀림.
methods의 경우 함수를 의미하는 ()붙여서 호출해야한다.
testMessage()
computed의 경우 ()를 붙일 필요가 없이 기존 data와 같은 방식이다.
testMessage
차이2 computed에서는 인자를 넘길 수 없음
차이1에서 설명했듯이 computed는 함수형태로 호출하는 방식이 아니므로 인자를 가질 수 없다.
methods는 인자를 가질 수 있다.
차이3 computed에서는 반드시 return값이 있어야 한다.
template안에서 쓰는거라면 method도 return값이 있어야 하는건 마찬가지겠지만 강제성은 computed가 강한것 같다.
차이4 update life cycle hook발생시 template에 정의한 method들은 무조건 실행됨
update hook이 발생하면 template에 있는 method들은 반드시 실행된다.
헷갈리는 부분인데 method가 종속성이 높다라는 이해로 받아들이면 좋을거 같다.
update hook은 데이터가 변경되어 가상돔을 재랜더링할때 발생한다.
이렇게되면 해당 method와 관련없는 어떤 액션에 의해 method가 실행되버리므로 의도치 않는 버그가 발생할 가능성이 있다.
그래서 특별한 이유가 없는 한 computed를 사용하는것을 권장한다.(인자를 반드시 넘겨주고 싶다거나 하는 이유)
computed vs watch
변경이 일어날때 무언가를 실행한다라는 의미로는 watch와도 비교된다.
watch와의 공통점과 차이점에 대해 알아보자.
공통점
둘다 옵저버 패턴으로 동작한다.
값이 변하면 무언가 실행된다.
차이1 template 기술부분
computed는 template에 기술함
watch 메소드는 template에 기술하는 개념이 없음
차이2 캐싱
computed는 캐싱의 개념이 있다.
message = "test"상태에서
this.message = "test"하면 값의 변경이 없으므로 computed안의 메소드를 실행하지 않고 캐싱된 값을 리턴해준다.
차이3 computed는 return이 필수이다.
computed는 return이 필수이다.
watch는 return이 있어도 동작안할거 같은데?(테스트는 안해봄)
차이4 역할이 다름
computed는 변경이 있고, 그 변경으로 인한 결과가 필요할 때 사용( property라는 느낌이 강함)
watch는 트리거의 역할로 사용된다.(값의 변경이 있고 그 변경의 결과에 따라 다른 메소드 등을 호출할 때 사용)
computed의 사용예
data의 값을 대문자로 보여주고 싶을때
a data와 b data를 결합해서 보여주고 싶을때
watch의 사용예
특정 값이 변경되었을때 axios같은 비동기 통신이나 복잡한 처리를 넣고 싶을때 주로사용
다른 data의 값을 변경할때(this.xx = 'yy',push)
reference:
https://medium.com/@hozacho/%EB%A7%A8%EB%95%85%EC%97%90-vuejs-%EA%B3%84%EC%82%B0%EB%90%9C-%EC%86%8D%EC%84%B1-vuejs-instance-computed-93cb6ad7dca9