💻 VueJS Computed & Watch

이번 챕터는 Vuejs의 computed와 watch에 대해 다루었습니다.
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

📃 오늘 공부한 것

Computed

템플릿 안에서 많은 연산을 하면 코드가 커지고 유지보수가 어렵기 때문에 좋은 방향이 아니다. 이럴 때 사용하는 것이 computed이다. 또한 computed의 값은 캐싱되기 때문에, 리렌더링 됐을 때, 같은 값이 들어왔다면 연산하지 않는다.

<template>
  <div>
    <p>{{ increse }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      score: 1
    };
  },
  computed: {
    increse() {
      return score + 1;
      //data에 직접 접근하여 계산한 결과를 템플릿에 보일 수 있습니다.
    }
  }
};
</script>

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

computed 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) {
        [this.firstName, this.lastName] = newValue.split(" ");        
      }
    }
  }
};
</script>

위처럼 fullName이 변경되면 set이 실행되고 firstName과 lastName이 동시에 바뀌게 된다.

Watch

대부분의 경우 computed 속성이 더 절적하지만, watch가 필요한 경우도 있다. 데이터 변경에 대한 응답으로 비동기 혹은 비용이 많이 드는 작업을 수행하려는 경우에 유용하다. watch는 같은 값이어도 연산을 다시한다는 특징도 있다.

fruits를 감시하면서 의 값이 바뀔 때마다 handler()함수가 실행되는 예제이다.

<template>
  <div id="app">
    <button @click="capitalize">capitalize</button>
    <ul>
      <li v-for="fruit in fruits">{{ fruit.name }}</li>
    </ul>
  </div>
</template>

const App = {
  data() {
    return {
      fruits: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ]
    }
  },
  watch: {
    fruits: {
      handler() { 
        console.log(this.fruits)
      },
      deep: true, // 중첩 데이터도 감시
      immediate: true // 데이터 변경시 실행 뿐만 아니라 데이터가 준비가 되자마자 즉시 실행
    }
  },
  methods: {
    capitalize() {
      this.fruits.forEach(fruit => {
        fruit.name = fruit.name.toUpperCase()
      })
    }
  }
}
const vm = Vue.createApp(App).mount('#app')

🔥 느낀점

computed와 watch에 대해서 배웠는데 차이점에 대해서도 알게 되었고 확실히 실습과 함께 진행하다 보니 이해가 더 빨리 되는 것 같다. 그동안 바닐라JS로 state를 하나하나 변경하고 감지해야했을 때와는 달리 watch, computed 등으로 변경을 쉽게 감지할 수 있다는 것이 매력적이었다. 역시 프레임워크를 사용하는 이유가 있다.

vue 재미있다. 드디어 이번주 밀린 강의 청산 완료

Refer

프로그래머스 데브코스
Vue - compted 속성과 watch

정리

Day35