Computed/Watch

Computed

• template 부분에 너무 복잡한 연산을 이용하면 코드가 지저분해지고 유지보수가 어려워진다. Computed를 이용하면 복잡한 연산 과정을 따로 빼내어 편하게 템플릿에 적용할 수 있다.

 

• 기존에 아래와 같이 템플릿에서 JS문법을 이용해 연산 결과를 직접 입력했다면

<template>
  <div>{{ arr.reduce((acc, cur) => (acc += cur), 0) }}</div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4, 5],
    };
  },
};
</script>

• 아래와 같이 연산 로직을 따로 computed로 빼서 사용할 수 있다. 
• method와 마찬가지로 this를 이용해 data에 접근할 수 있다!

<template>
  <div>{{ sumArray }}</div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4, 5],
    };
  },
  computed: {
    sumArray() {
      return this.arr.reduce((acc, cur) => (acc += cur), 0);
    },
  },
  methods: {},
};
</script>

++주의사항

• template 안에 computed 값을 쓸 때, 함수처럼 생겼다 해서 sumArray() 이런식으로 쓰면 안됨!
  • ()를 빼고 써라
• 또한, HTTP 통신 로직을 사용하면 안되고 인자도 받으면 안된다!

---

Computed VS Method

• 위에 나온 computed처럼 method도 데이터를 연산한 후 리턴시킬 수 있다.
  • 물론 method는 ()를 붙여서 실행시켜야 한다.ㄱ

 

<template>
  <div>{{ sumArray() }}</div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4, 5],
    };
  },
  methods: {
    sumArray() {
      return this.arr.reduce((acc, cur) => (acc += cur), 0);
    },
  },
};
</script>

 

• 그렇다면 차이점이 뭘까 ?
• 바로 caching이다.
• computed 속성은 data 부분의 reactive 종속성에 기반해 캐싱 된다!
• 즉, computed는 data 부분의 state가 변하지 않으면 함수를 다시 실행할 필요 없이 이전의 결과를 반환한다.
• method는 컴포넌트가 다시 렌더링이 발생할 때마다 항상 함수를 실행한다!
• 어떠한 state에 대해 비용이 높은 연산을 하는 작업이 있다면 렌더링 될 때마다 그 로직을 다시 실행시키는 것보다 연산 결과를 저장했다가 바로 리턴해서 받는 것이 훨씬 유리할 것이다!

Watch

• watch는 data 부분의 reactive 값이 변경되면 지정한 콜백함수가 실행되는 기능이다.
• 비동기나 비용이 많이 드는 작업을 수행할 때 유용하다고 한다. 일하면서 알겠지뭐
  
  • API Call, Routing, ...

 

• 아래 예시로 좀 더 자세히 알아보자!
• count라는 상태 값이 버튼을 클릭했을 때 1 증가하고, watch를 이용해 변경된 상태를 자동으로 감지하여 alert 해준다.
• 사용법은 watch 속성 안에 감시할 값을 key로 쓰고 value에는 실행될 콜백함수를 익명함수로 작성해준다.

<template>
  <button @click="count++">count ++</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  watch: {
    count: function () {
      alert(this.count);
    },
  },
};
</script>

<style>
</style>

파라미터 이용하기

• 파라미터를 넘겨서 이전의 상태와 최신의 상태에 대한 정보를 알 수 있다.
• 첫번째 파라미터는 최신의 상태에 대한 정보이고 두번째 파라미터는 이전 상태의 정보이다

<template>
  <button @click="count++">count ++</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },

  watch: {
    count(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
  },
};
</script>

 

++ 주의사항 (deep: true)

• 만약 object나 array의 속성값이 변하는 경우에는 변화를 감지할 수 없지만 deep: true 옵션을 추가해주면 객체를 통째로 감시하면서 변화를 알 수 있다!

<template>
  <button @click="count.num++">count ++</button>
</template>

<script>
export default {
  data() {
    return {
      count: { num: 1 },
    };
  },
  watch: {
    count: {
      handler: function () {
        alert(this.count.num);
      },
      deep: true,
    },
  },
};
</script>

<style>
</style>