[Vue.js] computed & watch

computed

{{ }} 내에 간단한 연산을 넣는 것은 괜찮지만 방대한 양의 계산을 할 때는 부적절하다.
이때 사용하는 것이 computed 이다.

<template>
  {{ count + 1 }}	// 1
  {{ increaseCnt }}	// 2
 </template>
<script>
  export default {
  	data() {
    	return {
        	count: 1,
        }
    },
    computed: {
      increaseCnt() {
        return count + 1;
      }
    }
  }
</script>

결과는 1번과 2번 모두 2로 같다.
그러나 만일 count연산이 훨씬 복잡해질 경우 computed 내에 함수를 선언해 변수처럼 사용하는 것이 가능해진다.

methods와의 차이

<template>
  {{ increaseCntComputed }}
  {{ increaseCntMethod() }}
</template>
<script>
  export default {
	data() {
      return {
        count: 1,
      }
    },
    methods: {
      increaseCntMethod() {
        return count + 1;
      }
    },
    computed: {
      increaseCntComputed() {
        return count + 1;
      }
    }
}
</script>

우선 computed 사용 시 괄호없이 변수처럼 사용하는 것이 가능하다.
또한 computed는 캐싱 기능이 있어 data가 변하지 않는 이상 값을 계속 가지고 있다.
예제 코드의 경우 increaseCntComputed 값은 2로 일관되다.
그러나 methods의 경우에는 실행 시 마다 사용하고 반복하므로 계속해서 호출 시 함수 사용을 반복한다.

중복제거의 효과

반복된 메서드를 사용할 시 사용된 곳 마다 코드를 일일이 고치지 않고도 한번에 관리가 가능하다.

watch

computed가 사용 가능하면 무조건 computed를 사용하길 권장한다.
watch는 불가피할 때만 사용.

export default {
  watch: {
    감시할data명(newVal, oldVal) {
      // 작동할 코드
    }
  }
}

이렇게 작성한다.
예시로

export default {
  data() {
    return {
      count: 1,
    }
  },
  methods: {
    increase() {
      return count + 1;
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(newVal, oldVal);
      // increase 메소드 실행 시 결과
      // 2, 1
    }
  }
}