[Vue.js] Vue computed 개념 정리

 

computed(연산 프로퍼티)

 

1.  computed를 사용하는 이유

템플렛안에 기술하는 것이 더 편리하지만 코드가 길어지면 길어질 수록 점점더 보기 싫어지고 복잡해진다(유지보수가 어려워짐)아래와 같이 심플한 코드는 괜찮겠지만 이게 점점 길어진다면? 생각만 해도 끔찍하다 

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

• 템플릿에서 사용할만한 복잡한 로직은 computed에서 사용하도록 하자

 

아래의 예시를 보면 코드의 수는 늘어났지만 html의 코드는 깔끔하고 더 명확하게 된것을 알 수 있다.　

또한 computed로 만든 덕분에 다른 곳에서도 자유롭게 메소드를 사용할 수 있게 되었다(재사용성)

<div id="example">
  {{ reversedMessage }}
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 산출 getter 함수
    reversedMessage: function () {
      // `this`는 「vm」 인스턴스를 뜻한다
      return this.message.split('').reverse().join('')
    }
  }
})

 

2. 연산 setter 함수

연산 프로퍼티의 디폴트는 getter 함수만 있지만 필요에 의해 setter함수를 설정할 수 있다.

 

예시

computed: {
  fullName: {
    // getter 함수
    get() {
      return this.firstName + ' ' + this.lastName
    },
    // setter 함수
    set(newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

 

3. computed vs methods

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

computed의 역할을 methods에서도 똑 같이 할 수 있다(결과도 완전 똑같다!)

• computed는 리액티브(Reactive, 반응적)인 의존관계에 의해 캐쉬화(캐쉬) 되어진다.

 

message가 변하지 않는 한 reversedMessage가 몇번이고 불려저도 함수는 다시 실행되는 것이 아닌 이전에 계산되어진 결과를 즉시 돌려준다

• 반면 methods는 렌더링(rendering)을 다시 할 때마다 항상 함수를 실행한다.
• 캐싱이 필요한 이유
  계산이 많이걸리는 A가 있다고 하자. 이 A계산을 계속해서 실행하면 시간이 점점 느려지게된다. 때문에 computed를 사용한다면 전에 계산되어 있던 결과를 그대로 반환하기 때문에 속도가 빠르다. 캐쉬를 사용하지 않아도 되는 경우는 method를 캐쉬를 사용해야 하는 경우에는 computed를 사용하는 것을 추천한다!

 

4. computed vs watch

Vue는 데이터의 업데이트를 반응하기 위해 보다 범용적인 방법으로 watch 기능을 제공하고 있다

대부분의 경우 연산 프로퍼티를 사용하는 것이 적절하지만 watch가 필요한 경우가 있다

1. 데이터를 업데이트 할 때 비동기처리나 무거운 처리(많은 처리)를 실행하고 싶은 경우 편리하다
2. 감시할 데이터를 지정하고 그 데이터가 바뀌면 선언한 함수를 실행하라는 방식으로 명령형 프로그래밍이다. but computed속성은 계산해야 하는 목표 데이터를 정의하는 방식으로 선언형 프로그래밍이다

• 선언형 프로그래밍이 명령형 프로그래밍보다 코드 반복이 적은 등 우수하다고 평가하는 경향이 있다고 한다.

 

watch와 computed의 차이점

// watch
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }

//computed
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

 

filter

우선 2.x에 있던 filter기능은 더 이상 사용되지 않는다고 한다. 그 대신에 computed, methods를 사용하는 것을 추천한다고 기록되어 있다.
filter 대신에 computed를 추천하고 있기 때문에 이 포스트에 기술하였다.

 

 

 

출처

 

https://velog.io/@jinsu6688/vuejs-computed