[Vue.js] Computed 바인딩

Computed 바인딩

• 데이터를 가공한 새로운 값을 생성해서 바인딩할 목적으로 사용
• 정의 형태는 리턴값이 있는 메소드이지만, 사용은 속성처럼 사용
• 데이터가 변경되지 않으면 캐싱된 이정 값을 바인딩, 메소드를 재실행하지 않음
• 데이터가 변경되면 자동으로 메소드 실행, 리턴값으로 새로 캐싱
  
  • 불필요한 캐싱을 줄임으로써 성능 향상

 

Computed  사용 예시

<template>
  <div class="card">
    <div class="card-header">
      ComputedBinding
    </div>
    <div class="card-body">
      <p>ssn1: {{ssn1}}</p>
      <p>ssn2: {{ssn2}}</p>
      <p>date:  {{date}}</p>
      
      <p>ssn: {{computedSsn}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name:"ComputedBinding",
  data() {
    return {
      ssn1: "970331",
      ssn2: "222222",
      date: new Date()
    };
  },
  computed: {
    computedSsn() {
      console.log("Run computedSsn");
      const ssn = this.ssn1 + "-" + this.ssn2.charAt(0) + "******";
      return ssn;
    }
  }
}
</script>

결과: