Method/ Computed

베짱이·2021년 8월 6일
0

Vue

목록 보기
1/3
post-thumbnail

Method

렌더링이 일어날 때마다 항상 함수를 실행한다.

Computed

호출하는 부분을 감시하고 있다가 값이 변경되면 다시 계산하고 자동으로 캐싱해주는 '끝내주는 반응형'이다.
computed에 정의하는 익명함수는 반드시 값을 리턴하도록 작성되야한다.

계산해야하는 목표 데이터를 정의 하는 ‘선언형’ 프로그래밍 방식. 저장된 결과(캐싱)를 반환하므로 종속 대상의 변경이 일어나기 전까지 호출 되지 않는다.

Method와 Computed 의 차이

computed는 data속성에 변화가 있을 때 자동으로 다시 연산을 한다.

computed에서 사용하고 있는 data속성인 message라는 프로퍼티가 변화가 있을때만 다시 연산을하고 한번 연산한 값을 캐싱 해놓았다가 필요한 부분에 다시 재 사용한다.
같은 페이지내에서 같은 연산을 여러번 반복해야 할 경우에 성능면에서 효율적으로 사용할 수 있다.

반면 methods는 캐싱이라는 개념이 없기 때문에 매번 재 렌더링된다.
캐싱 효과가 필요하다면 computed를 사용하고 캐싱이 필요없다면 methods를 사용하도록 하자.

  1. template에서 호출시 ()를 적지 않아야 된다.
  2. return 값이 반드시 존재해야한다.
  3. 파라메터를 받을 수 없다.

Method를 사용해야 할 때.

  1. 파라메터를 받아서 호출해야할 때 - data를 사용하지 않는다는 정책을 취한다면 computed로는 아예 불가능하다.
  2. 함수 안에서 다른 값을 바꿔줘야할 때 - computed에서는 다른 값을 바꾸는건 정책위반이다. (불가능한건 아니다.) 이 경우 methods를 사용한다.

참고1
참고2

profile
하루는 개발만 하기에는 너무 길다.

0개의 댓글