computed & watch & methods

computed & watch

watch 속성은 computed 속성과 비슷한 방식으로 작동하기 때문에, 종종 혼동이 된다.

watch는 "부수 효과" 처리를 위한 것이다. 만약 상태를 변경하고 싶다면 computed를 사용하는게 좋다.
"부수 효과"는 컴포넌트 외부의 동작이나, 비동기 처리를 말한다.

• 데이터를 가져오는 것(fetching data)
• DOM 조작하기
• 로컬 저장소 또는 오디오 재생과 같은 브라우저 API 사용

위 목록 중 어떤 것도 직접 컴포넌트에 영향을 주지 않기 때문에, 부수 효과로 간주한다.

data를 업데이트 하기위해 watch를 사용하기도 한다. template 이나 methods에서 업데이트해야 한다면, data안으로 들어가야 한다. 그 후의 속성 변경에 대한 응답으로 업데이트 해야 하는 경우, watch를 사용해야 한다.

computed는 다른 변화에 대한 응답으로 계산을 업데이트 해야할 때 좋다.

compute 속성의 캐싱 & methods 호출하기

computed 속성 대신 메소드와 같은 함수를 정의할 수도 있다. 최종 결과에 대해 두가지 접근 방식은 서로 동일하다.

다만, computed 속성은 종속 대상(message)을 따라서 캐싱(저장)된다!

computed

• computed 속성은 해당 속성이 종속된 대상(message)이 변경될 때만 함수를 실행한다.
• 즉, message가 변경되지 않는 한, computed 속성인 reverseMessage를 여러번 요청해도, 계산을 다시하지 않고 계산되어 있던 결과를 즉시 반환한다.
• 또한 Date.new()처럼 아무곳에도 의존하지 않는 computed 속성의 경우, 바로바로 업데이트 되지 않는다.

methods

• methods를 호출하면 랜더링을 다시할 때마다 항상 함수를 실행한다.
• 계산에 시간이 많이 걸리는 computed 속성 A가 있다고 가정하면, A속성을 계산하려면 거대한 배열을 반복해서 다루기 때문에 많은 계산을 해야한다. A에 의존하는 다른 computed 속성이 있을 수도 있다. 캐싱을 하지 않으면 A의 getter함수를 꼭 필요한 것보다 더 많이 실행하게 된다.
• 즉, 캐싱을 원하지 않는다면? 메소드를 사용한다.

<p>뒤집힌 메시지: "{{ reversedMessage() }}"</p>

// 컴포넌트 내부
var vm = new Vue({
	el: "app",
	methods: {
	  reversedMessage: function () {
	    return this.message.split('').reverse().join('')
	  }
	}
	computed: {
	  now: function () {
	    return Date.now()
	  }
	}
})