Vue.js computed와 watch 이해하기

Vue에서 computed와 watch 모두 인스턴스 내에서 정의된 데이터 값의 변경이 일어나는지 감시하고, 변경이 될 때마다 정의된 기능을 실행한다는 측면에서는 비슷해보일 수 있지만 특징이나 사용용도 측면에서는 차이가 있다.

 

Computed

만약, 인스턴스 내에서 데이터 조합 등의 처리가 필요하고, 이 처리된 데이터가 화면 내에서 여러곳에서 사용을 해야 한다면 아래와 같은 처리를 생각해볼 수 있다.

<template>
  <div>
    <!-- 필요한 처리를 하는 함수를 생성해서 호출 한다 -->
    <h1>{{ fullNameCall() }}</h1>
    <h1>{{ fullNameCall() }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fName: "GilDong",
      lName: "Hong",
    };
  },
  methods: {
    fullNameCall() {
      console.log("call fullName!");
      return this.fName + this.lName;
    },
  },
};
</script>

위와 같이 필요한 처리를 하는 함수를 만들어서 실행을 할 경우 화면에 표시가 될 때마다 함수를 호출을 해야하는 비효율이 발생하고, 데이터가 변경(ex. fName, lName)이 되었을 경우 감지가 안되는 문제가 있다.

이런 경우를 위해서 Vue에서는 Computed를 제공하고 있다. Computed를 적용하면 아래와 같이 코드를 변경 할 수 있다.

<template>
  <div>
    <!-- computed 적용 -->
    <h1>{{ fullName }}</h1>
    <h1>{{ fullName }}</h1>
    <button type="button" @click="changeLastname">Change LastName</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fName: "GilDong",
      lName: "Hong",
    };
  },
  // computed 선언 
  computed: {
    fullName() {
      return this.fName + this.lName;
    },
  },
  // computed 내부 데이터 변경 테스트용 함수 
  methods: {
    changeLastname() {
      this.lName = "Kim";
    },
  },
};
</script>

함수를 제거하고 computed를 선언해주고 computed를 데이터처럼 template에서 사용을 했다.

이처럼 computed는

- 함수이면서 동시에 데이터

- 화면에 여러번 사용이 되어도 연산이 한번만 일어남

- 데이터의 변경이 있을 경우 자동 감지하고 반영

- 기존에 정의된 데이터 값을 기반으로 새로운 데이터 값을 활용하기 위해 주로 사용

- 종속관계가 복잡할 수록 재계산 시점을 예상하기 힘들수 있다.

 

 

watch

computed와 달리 watch는 

- watch에 정의된 데이터 값 하나만을 감시

- 초기에 할당된 값에서 반드시 변경이 일어나야만 watch가 실행(최초 할당된 값에는 watch가 실행이 되지 않는다)

- 특정 데이터의 변경시점에 특정 액션(Call API, Push Route 등)을 취하고자 할때 적합

<template>
  <div>
    <h1>{{ watchValue }}</h1>
    <button type="button" @click="changeWatchValue">Change WatchValue</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      watchValue: "watchValue",
    };
  },
  watch: {
    watchValue(newValue, oldValue) {
      console.log("oldValue: ", oldValue);
      console.log("newValue: ", newValue);
      // TODO watch 값이 변경됐을 경우 SomeThing 액션
    },
  },
  methods: {
    // watchValue 변경을 위한 테스트 메소드 
    changeWatchValue() {
      this.watchValue = "Changed!!";
    },
  },
};
</script>

위 코드를 실행하면 최초 렌더링 시에는 watch가 동작하지 않는다(로그가 안찍힘).  watchValue 변경을 위한 테스트 버튼을  클릭할 경우 watch가 실행이 되고 로그가 찍힌다. 그리고 다시 버튼을 클릭해도 watchValue에는 변경이 없음으로 watch가 계속해서 실행이 되지는 않는것을 확인할 수 있다.