computed2 [Vue] Computed 속성의 Getter와 Setter ⚠️ 이 포스팅은 Vue3(한국어): Computed 속성과 Watch를 공부하고 정리한 블로그 포스팅입니다. ⚠️ Computed 속성의 Setter computed 옵션 (Getter 기능) computed 옵션에 있는 함수의 리턴값은 읽기 전용(READ ONLY)이다. 값을 얻어내는 용도로만 사용하므로 reverseMsg는 Getter다. computed: { // 값을 얻어오는 용도로 사용하는 함수 (Getter) reversedMsg() { return this.msg.split('').reverse().join(''); }, } Setter 기능을 추가한 computed 옵션 computed 옵션에 있는 reverseMsg 함수를 Getter, Setter가 모두 가능하게 하기 위해 다음과 같.. 2022. 6. 12. [Vue] Computed 속성과 Computed 캐싱 ⚠️ 이 포스팅은 Vue3(한국어): Computed 속성과 Watch를 공부하고 정리한 블로그 포스팅입니다. ⚠️ Computed 속성 Computed 속성 템플릿 안에서 너무 많은 연산을 하면 코드가 비대해지고 유지보수가 어렵다. 아래의 예제에서는 문자열 msg 데이터를 거꾸로 출력해주는 reverseMsg라는 메서드가 있다. 이 메서드의 결과값을 화면에 세번 출력시키기 위해 같은 메서드를 세번 부른다면 메서드가 호출될때마다 같은 연산을 반복하면서 메모리가 낭비된다. {{ reverseMsg() }} {{ reverseMsg() }} {{ reverseMsg() }} 연산된값을 반복해서 출력하고 싶다면 computed 옵션을 사용해 함수를 만들어준 후 호출해준다. computed 옵션 안에 있는 함수.. 2022. 6. 12. 이전 1 다음
