[Vue] Computed와 Watch

Vue에는 Computed와 Watch 속성이 있다. 둘의 특징과 차이점을 알아보자

 

Computed 속성

템플릿 내에 들어가는 값이 변환 되어야 하는 경우 filter를 사용하면 원하는 방향으로 변환할 수 있다.

그러나, 많은 연산을 해야할 경우 템플릿이 간단하지 않고, 함수도 매번 정의해야 하기 때문에 좋은 방향이라 할 수 없다.

또한, Store의 값을 Getters로 가져와 템플릿 내에 보여줘야 할 때에도 곤란하다.

이럴 때 사용하면 좋은 것이 Computed 속성이다.

<template>
  <div>
    <p>{{ ticketList }}</p>
    <p>{{ increse }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      score: 1
    };
  },
  computed: {
    increse() {
      return score + 1;
      //data에 직접 접근하여 계산한 결과를 템플릿에 보일 수 있습니다.
    },
    ticketList() {
      return this.$store.getters["ticket/ticket"];
      // ticket.js라는 store에 접근해 ticket state를 가져온 후 템플릿에 보입니다.
    }
  }
};
</script>

위와 같이 computed 속성은 데이터 바인딩이 가능하여 data에 접근이 가능하고 data가 바뀜에 따라 computed 값도 자동으로 바뀌어 렌더링 된다.

또한, computed 속성의 getter 함수는 사이드 이펙트가 없어 코드를 테스트하기가 쉽다.

 

Computed 메소드 호출

Computed에 선언 가능하고 methods에도 선언이 가능하다.

<template>
  <div>
    <p>{{ increse() }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      score: 1
    };
  },
  methods: {
    increse() {
      return this.score++;
    }
  }
};
</script>

두 방법의 접근 방식은 서로 동일하다.

 

Computed vs Methods

이 둘의 차이점을 살펴보면 다음과 같다.

• Computed
  • 의존하는 값이 변하는 경우 계속 실행한다.
  • 계속 캐싱하여 값을 바꾸어 보여주고 싶을 때는 computed를 사용하면 된다.
• Methods
  • 렌더링 될 때만 함수가 실행된다.
  • 렌더링 된 값으로 유지하고 싶다면 methods에 정의하면 된다.

 

computed getter / setter

getter는 위에서 본 것과 같다.

<script>
export default {
  computed() {
    return this.$store.getters["ticket/ticket"];
  }
};
</script>

위 부분이 getter를 사용한다는 의미이다.

 

setter를 보자.

<template>
  <div id="demo">{{ fullName }}</div>
</template>
<script>
export default {
  computed: {
    fullName: {
      // getter
      get: function() {
        return this.firstName + " " + this.lastName;
      },
      // setter
      set: function(newValue) {
        var names = newValue.split(" ");
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
};
</script>

이 처럼 fullName이 임의의 값으로 바뀌게 되면 set이 실행되고 firstName과 lastName이 동시에 바뀌게 된다.

 

Watch 속성

watch는 현업에서 computed와 같이 매우 많이 사용하는 속성이다.

watch는 캐싱한 값이 바뀜에 따라 어떤 행동을 할지 정하는 속성이다. 바로 예제로 보겠습니다.

<script>
export default {
  watch: {
    $route: {
      handler() {
        this.changeData();
      },
      immediate: true
    }
  }
};
</script>

굉장히 많이 쓰이는 구문이다.

쉽게 설명하자면, 라우트 값(홈페이지 주소)가 바뀜에 따라 handler()에 있는 함수(changeData)가 실행된다는 것이다.

**immediate는 렌더링 된 직후 바로 실행된다는 뜻이다.

 

위 예제 말고도 data에 선언된 값을 추적하여 그 값이 변할 때마다 함수를 실행할 수도 있다.

<template>
  <div>
    <input v-model="question" />
  </div>
  <p>{{ answer }}</p>
</template>
<script>
export default {
  data(){
    return {
      question: '',
      answer: '선 질문 후 대답'
    }
  }
  watch: {
    question: function(newQuestion){
      this.getAnswer();
    }
  }
}
</script>

위 처럼 question이라는 데이터 값이 바뀌면 this.getAnswer() 함수가 실행되게 할 수 있다.

간단히 말하자면 지정된 값이 바뀌면 정해진 콜백 함수가 실행된다.

 

Computed vs Watch

그럼 Computed와 Watch는 어떤 경우에 사용할까?

 

• Computed
  • 템플릿 내의 값이 data와 종속되었을 경우 사용하는 것이 유리하다.
  • 왜냐하면, 같은 경우 watch를 사용하면 중복 호출하거나, 코드가 복잡해지기 때문이다.
  • 또한, computed의 값은 캐싱되기 때문에 리렌더링 되었을 때 같은 값이 들어왔다면 연산하지 않는다. (watch는 같은 값이여도 연산을 다시 함)
  • 따라서, 컴포넌트가 리렌더링이 많이 되거나 값이 바뀔 일이 없다면 computed를 필히 써야한다.
• Watch
  • 지정한 값이 변경된 시점에서 내가 원하는 액션( api call, route.push() )을 하기 원할 때 사용한다.