computed / watch

computed와 watch

가급적 computed를 사용할 것

 

computed는 선언형 방식이고, watch는 명령형 방식.

종속된 값이 변경되는것을 예상하여 미리 계산하여 선언해놓고 사용하는 방식이 computed

특정 데이터를 감시하고 변경에 대한 반응이 (함수 호출과 같은) 필요한 경우 watch

computed가 유용한 경우

• 데이터의 변화에 따라서 화면에 계산된 값을 화면에 출력해야 하는 경우
• 캐싱이 필요한 경우, 입력값이 같을 경우 기존 캐시된 데이터를 사용하기 때문에 computed 구현체가 호출되지 않습니다.

watch를 사용해야 하는 경우

• 단순한 계산 외에 비동기 처리 로직이 포함되는 경우
• 캐싱없이 매번 호출해야하는 경우
• 템플릿에 출력하지 않는 값의 변화를 관찰해야 할 경우

velog.io/@kyusung/vue-rendering-optimization

Vue 렌더링 성능 개선하기

 

예제

  computed: {
    user: {
      get() {
        return this.$store.state.user;
      },
    },
    isLoggedIn: function() {
      return this.$store.state.user;
    },
    language: function() {
      return this.$i18n.locale;
    },
  },
  watch: {
    "$route.params.lessonId": function() {
      this.lessonId = this.$route.params.lessonId;
      console.log("LessonId: " + this.lessonId);
      this.pageInit();
    },
    language: function() {
      this.$router.push({ name: "Packages" }).catch((error) => {
        if (error.name != "NavigationDuplicated") {
          throw error;
        }
        this.$router.go("Packages");
      });
    },
  },

created의 language함수는 프로젝트 전역에서 브라우저의 언어를 리턴하는 함수이다.

반면 watch함수에서 language함수는 변화를 감지하고 라우팅 로직을 처리하는 것을 볼 수 있다.