6.vueJS 기초지식 익히기 computed 편

'코지코더님의' vue JS 강의를 듣고 배운 내용을 기록한 게시글 입니다.

1.Computed 란?

vue 공식 문서에서 나와있듯이 vue에서는 템플릿 코드안에 자바스크립트 문법을 사용할 수 있다.

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

템플릿 안에다가 이렇게 자바스크립트 문법을 이용할 수 있는데, 예시에서는 짧은 예시이지만, 실제 코드를 작성하게 되면서 엄청나게 데이터를 변환시키면서 코드가 가독성도 떨어지고 유지 보수 하기도 힘들어진다. vue에서는 이러한 코드의 가독성과 유지 보수를 생각해서 computed 를 제공한다.

<div id="app">{{ reversedMessage }}</div>
new Vue({
        el: '#app',
        data: {
          message: '안녕하세요',
        },
        methods: {},
        computed: {
          reversedMessage() {
            return this.message.split('').reverse().join('');
          },
        },
      });

2.Method 와 Computed와의 차이점?

전에 배운 method 에서는 사용이 불가능한것인가 ?

 <div id="app">
     <div>{{ reversedMessage }}</div>
     <div>{{ reversedMessage }}</div>
     <div>{{ reversedMessage }}</div>
   </div>
   
  methods: {
         reversedMessage() {
           return this.message.split('').reverse().join('');
         },
       },

이렇게 출력되는 이유는 method 에서는 함수이기때문에 함수를 호출 해줘야 한다.

 <div id="app">
      <div>{{ reversedMessage() }}</div>
      <div>{{ reversedMessage() }}</div>
      <div>{{ reversedMessage() }}</div>
    </div>

해당 코드를 이렇게 바꾼 후 어떻게 출력 되는지 보자.

잘 나옵니다.
근데 vue에서는 왜 computed를 사용하는것을 지향 하는것일까요 ??

그 이유는 바로 캐싱이 되고 안되고의 차이라고 합니다.
공식문서에서는 이렇게 설명하고 있습니다.
computed 속성 대신 메소드와 같은 함수를 정의할 수도 있습니다. 최종 결과에 대해 두 가지 접근 방식은 서로 동일합니다. 차이점은 computed 속성은 종속 대상을 따라 저장(캐싱)된다는 것 입니다. computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행합니다. 즉 message가 변경되지 않는 한, computed 속성인 reversedMessage를 여러 번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환합니다.