Vue advanced

Vue instance가 가진 options

 

1. computed

: computed 객체에 정의한 함수를 페이지가 최초로 렌더링 될 때 호출하여 계산

-> 계산 결과가 변하기 전까지 함수를 재호출하는 것이 아닌 계산된 값을 반환

 

 

methods VS computed

methods	computed
호출 될 때마다 함수를 실행 같은 결과여도 매번 새롭게 계산	함수의 종속 대상의 변화에 따라 계산 여부가 결정됨 종속 대상이 변하지 않으면 항상 저장된 값을 반환

 

 

2. watch

: 특정 데이터의 변화를 감지하는 기능

1. watch 객체 정의
2. 감시할 대상 data 지정
3. data 변화 시 실행할 함수 정의

함수의 첫 번째 인자는 변동 전의 data, 두 번째 인자는 변동 후 data 

 

 

 

실행 함수를 Vue method로 대체 가능

1. 감시 대상 data의 이름으로 객체 생성
2. 실행하고자 하는 method를 handler에 문자열 형태로 할당

-> Array, Object의 내부 요소 변경 감지를 위해서는 deep 속성 추가 필요

 

 

 

 

3. filters

: 텍스트 형식화를 적용할 수 있는 필터

• interpolation 혹은 v-bind를 이용할 때 사용가능
• JS 표현식 마지막에 ' | ' (파이프)와 함께 추가되어야 함
• Chaining 가능

실행 결과

 

 

 

히히 예쁘다 :)