Computed vs. Methods
핵심은 캐싱(값의 저장)이 있냐 없냐에 차이다.
공통점: 둘 다 인스턴내에서 함수를 정의하는 부분이고, 데이터가 변동됨에 따라 안에 있는 함수를 재호출하게 된다.
차이점: 데이터가 변동되지 않는다고 가정했을 때이다.
- Computed: 종속 대상의 값이 저장(캐싱) 되어, 이미 계산되어진 값을 가져온다.
- 종속된 대상이 변경될 때만, 함수를 실행하고, 종속 대상이 변경되지 않으면, computed를 여러번 요청해도 계산을 다시 하지 않고, 계산되어 있는(computed) 결과를 즉시 반환한다.
- 데이터 변동이 없는 상태에서, 이전의 계산된 값을 캐시해 두었다가 함수 호출시 재사용한다.
- methods: 렌더링을 다시 할때마다, 항상 함수를 실행하여 함수의 로직에 결과물을 반환한다.
- 사용할때마다, 함수의 계산을 다시 한다.
캐싱이 왜 필요할까?
computed의 속성이 계산이 많이 걸리는 함수라고 하자. 만약, 캐싱을 하지 않으면, computed의 속성의 getter 함수를 꼭 필요한 것보다 더 많이 실행하게 된다. 그래서, 캐싱을 원하지 않으면, methods를 사용한다.
결론
- 데이터가 자주 변동되지 않으면, 비용적인 면에서는 computed가 좋다.
- 데이터가 수시로 없데이트 되면, 계속해서 캐시를 저장하는 computed보다 methods가 더 좋다.
그래서, html에서는 computed는 변수처럼 쓰이고, methods는 함수처럼 쓰인다.
예) parse 함수
- Computed: parse를 그대로 사용한다.
- Methods: parse() 이런식으로 사용한다.
Computed vs. Watch
- Watch: 감시할 데이터를 지정하고 그 데이터가 바뀌면 이런 함수를 실행하라는 방식으로 소프트웨어 공학에서 이야기하는 ‘명령형 프로그래밍’ 방식
- Computed: 계산해야 하는 목표 데이터를 정의하는 방식으로 소프트웨어 공학에서 이야기하는 ‘선언형 프로그래밍’ 방식