[Vue] Computed 속성

도대체 Computed 속성은 언제 써야 하고 methods랑 같은 기능을 하는 것이 아닌가? 생각했었는데

코지 코더라는 유튜브 슨생님 강의를 듣고 이해하게 되었다.

딱 내가 원하는 강의 스타일... 어렵지 않고 기본에 충실하게 가르쳐 주신다!!

 

1. computed 속성

템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성이다.

 

 

2. computed 속성의 장점

• 뷰 템플릿 코드의 가독성을 높여줌
• 컴퓨티드 속성의 대상으로 정한 data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산해준다.
• 중복제거

<template>
  <div>
    <h1>Computed 속성</h1>
    
    <p>{{ message.split('').reverse().join('') }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
  </div>
</template>

 

만약에 위처럼 {{ }}  안에 코드를 넣어준다면 하나가 바뀌면 다 바꿔줘야 하는 끔찍한 일이 생긴다.

<template>
  <div>
    <h1>Computed 속성</h1>

    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
  </div>
</template>

computed: {
    reverseMessage() {
      return this.message.split('').reverse().join('')
    }
}

하지만 computed로 빼주면 단 한 줄만 바꿔주면 된다!

 

 

3. Computed 속성의 캐싱 vs 메서드

둘의 차이점은 computed는 의존하는 값이 변하는 경우 계속 실행하고 methods는 랜더링 될 때만 함수가 실행되는 점입니다. 즉, 만약 나는 이 값이 랜더링 된 값으로 유지 한다면 methods에 정의를 하고. 계속 캐싱하여 값을 바꾸어 보여주고 싶을 때는 computed를 사용하면 됩니다.

 

 

• computed 속성은 데이터가 변경되지 않는 한 이전의 계산 값을 가지고 있다가, 필요할 때 바로 반환해 준다.
• methods 속성은 수행할 때마다 연산을 하기 때문에 별도의 캐싱을 하지 않는다.
• 따라서, 복잡한 연산을 반복 수행하는 화면에서는 computed 속성을 이용하는 것이 효율적이다.

 

똑같이 methods에 넣어주면 function ()으로 나오게 되는데 함수를 사용할 땐 뒤에 () 괄호를 붙여 줘야 한다.

 

methods : 함수를 사용할 땐 () 괄호를 써줘야 함

computed : 데이터 변수를 쓰는 것처럼 () 괄호 없이 써줌

 

 

뷰 인스턴스가 처음에 생성될 때 Message 가 '안녕하세요' 값을 가지고 있고 컴퓨티드 속성이 생긴다. 

{{ reverseMessage }} 접근할 때 이미 계산이 되어있음!! 그게 저장이 되어있어 3군데에 쓰이는 것이다.

하지만 methods에 있으면 {{ reverseMessage }} 접근할 때  1번 계산하고 2번 또 계산하고 3번 반복하면서 계산…

 

즉 !! 컴퓨티드 속성은 처음에 한 번만 계산되고 저장된 값을 뿌려주고

Message에서 만약 글자가 변경이 되면 캐치해서 다시 계산한 걸 값을 뿌려준다.

>> computed 속성은 반응형(reactive) 종속성에 기반하여 캐시된다는 것

 

 

 

 

 

 

---

예제

<template>
  <div>
    <h1>Computed 속성</h1>
    <button @click="changeMessage">click</button>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '안녕하세요'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'kim kyeong min'
    }
  },
  computed: {
      reverseMessage() {
        return this.message.split('').reverse().join('')
      }
  }
};
</script>

<style>
@import "/css/style.css";
</style>

 

https://v3.ko.vuejs.org/guide/computed.html#%E1%84%80%E1%85%B5%E1%84%87%E1%85%A9%E1%86%AB-%E1%84%8B%E1%85%A8%E1%84%8C%E1%85%A6

Computed 속성과 Watch | Vue.js