Vue 에서 함수를 구현하기 위한 속성으로 computed, methods 그리고 watch가 존재한다.
미세하지만 큰 차이점을 예제로 알아보자.

methods

• 해당 method를 사용하려고 할 때 마다 계산하게 된다.

• 다시말하자면 랜더링 할때마다 항상 method를 호출한다.

예제 코드

<div id="app">
	<input type="text" v-model="message" />
	<p>원본 메시지: "{{ message }}"</p>
	<p>역순으로 표시한 메시지1: "{{ reversedMsg() }}"</p>
	<p>역순으로 표시한 메시지2: "{{ reversedMsg() }}"</p>
	<p>역순으로 표시한 메시지3: "{{ reversedMsg() }}"</p>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			message: '글씨뒤집기',
		},
		methods: {
			reversedMsg: function () {
				console.log('호출!');
				return this.message.split('').reverse().join('');
			},
		},
	});
</script>

콘솔 결과창

• 총 세번 method를 호출하였는데, 할때마다 실행되는것을 볼 수 있다.

---

computed

• Vue 인스턴스가 생성될 때, data의 값을 받아 미리 계산하여 저장해 놓는다(캐싱)

• 작성은 method 형태로 작성하지만 Vue에서 proxy 처리하여 property 처럼 사용

• 특정 데이터의 변경사항을 실시간으로 처리한다.

• 호출시에도 method 가 아닌 property 와 같이 호출한다.

예제 코드

<div id="app">
	<input type="text" v-model="message" />
	<p>원본 메시지: "{{ message }}"</p>
	<p>역순으로 표시한 메시지1: "{{ reversedMsg() }}"</p>
	<p>역순으로 표시한 메시지2: "{{ reversedMsg() }}"</p>
	<p>역순으로 표시한 메시지3: "{{ reversedMsg() }}"</p>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			message: '글씨뒤집기',
		},
		computed: {
			reversedMsg: function () {
				console.log('호출!');
				return this.message.split('').reverse().join('');
			},
		},
	});
</script>

콘솔 결과창

• method와 같이 총 세번을 실행하였지만, 맨 처음 랜더링되었을 때 캐싱되어 값을 저장한다.

• 다음번에 랜더링되었을때 값이 변하지 않는다면 캐싱되어있는 값을 반환한다.

---

watch

• Vue Instance의 특정 property가 변경될 때 실행할 콜백 함수를 설정한다.

• watch는 data가 변경되었을 경우 다른 data를 변경하는 등의 작업을 한다.

예제 코드

<div id='app'>
	<p>변경 전 : {{message}}</p>
	<p>변경 후 : {{reverseMsg}}</p>
	<input type="text" v-model="message">
</div>
<script>
	const app = new Vue({
		el: '#app',
		data:{
			message: 'Hello',
			reverseMsg: ''
		},
		watch:{
			message :function(newVal, oldVal){
			console.log('newVal : ' + newVal + '  oldVal : ' + oldVal);
			this.reverseMsg = newVal.split('').reverse('').join('');
			},
		},
	});

    </script>

콘솔 결과 창

• 첫 화면

• 글자 입력시