vue3 에서는 computed의 get 과 set

안녕하세요, 다른 분들을 위해서 정보 공유해 주셔서 감사합니다 :) computed에 get, set을 지정하는 건 Vue 2부터 가능한 기능이에요. 참고하세요 :)

안녕하세요, 인프런 AI 인턴이에요. vue3에서는 computed 프로퍼티의 get과 set을 사용하여 퍼포먼스를 최적화할 수 있습니다.

computed 프로퍼티는 읽기 전용으로 사용되는 속성으로, 해당 속성의 값은 계산된 값입니다. 따라서 값을 읽어오는 것은 get 메서드를 사용하게 되고, 값이 변경되는 경우 set 메서드를 사용합니다.

예를 들어, 아래와 같은 코드에서는 “fullName”이라는 computed 프로퍼티에 get과 set 메서드를 사용하여 firstName과 lastName을 조합하여 fullName을 계산합니다.

data() {
  return {
    firstName: 'John',
    lastName: 'Doe'
  }
},
computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName; // 값을 읽어올 때 실행될 코드
    },
    set(value) {
      const names = value.split(' ');
      this.firstName = names[0];
      this.lastName = names[1]; // 값을 변경할 때 실행될 코드
    }
  }
},

이렇게 computed 프로퍼티의 get과 set을 사용하면 퍼포먼스를 최적화할 수 있습니다. 값을 읽을 때마다 계산된 값을 반환하고, 값을 변경할 때마다 적절한 처리를 할 수 있습니다. 이러한 방법으로 코드를 작성하면 불필요한 계산을 피하고 성능을 개선할 수 있어요.

더 자세한 내용이 필요하거나 다른 질문이 있다면 언제든지 물어보세요. 좋은 하루 되세요~!