computed

미리 저장된 상태 값을 만들 수 있어서, 인스턴스 템플릿에서 쉽게 가져다 사용할 수 있다.

 

Setter 와 Getter : 인스턴스와 연관 있는 상태 값(캐싱 값)을 한번에 변경 가능

- computed 함수 대신에 get 속성과 set 속성을 인자로 갖는 객체 리터럴을 전달함

 

get : 기존에 computed 함수가 했던 일을 대신 해줌 

- computed 속성을 인스턴스 템플릿에서 호출했을 때 사용

 

set : computed 속성에 전달하는 값을 받을 수 있도록 함수를 선언

- 함수 안에서는 전달 받은 값을 분리해서 상태에 각각 저장

---

 

캐싱 : 인스턴스 템플릿을 해석할 때마다 인스턴스 상태 값을 새로 갱신하지 않도록 내부에 계산된 속성값을 저장해두는 것

- 성능이 나빠지는 것을 막는 데 큰 역할을 함

---

  computed: {
    fullName: {
      get: function() {
        return this.firstName + ' ' + this.lastName
      },
      set: function(newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }