리스너
감시자(Watcher)는 ofa.js에서 데이터 변화를 감지하고 해당 로직을 실행하는 기능입니다. 반응형 데이터가 변경되면 감시자가 자동으로 콜백 함수를 트리거하여 데이터 변환, 부수 효과 작업 또는 비동기 처리 등의 작업을 수행할 수 있게 합니다.
기본 사용법
감시자는 컴포넌트의 watch 객체에 정의되며, 키 이름은 감시할 데이터 속성 이름에 해당하고, 값은 데이터가 변경될 때 실행되는 콜백 함수입니다.
count:{{count}}
doubleCount:{{doubleCount}}
콜백 함수 매개변수
리스너 콜백 함수는 두 개의 매개변수를 받습니다:- newValue：변화 후의 새로운 값
{watchers}：현재 컴포넌트의 모든 감시자 객체
데이터 변경 후에는 먼저 디바운스 처리를 한 후 watch의 콜백을 실행합니다; watchers 매개변수는 이번 디바운스 주기 내에 병합된 모든 변경 집합입니다.
watch의 함수는 컴포넌트 초기화가 완료된 후 즉시 호출되어 데이터 감시를 설정합니다. watchers의 길이가 있는지 확인하여 첫 번째 호출인지 구분할 수 있습니다.
이름: {{name}}
나이: {{age}}
{{log}}
심층 감청
객체나 배열 타입의 중첩 데이터에 대해，watch 내에서는 자동으로 깊은 감시가 수행됩니다.
사용자 정보:
이름: {{user.name}}
나이: {{user.age}}
취미: {{user.hobbies.join(', ')}}
여러 개의 데이터 소스 감시
여러 데이터의 변화를 동시에 감지하고, 콜백 함수에서 여러 데이터의 변화에 따라 해당 로직을 실행할 수 있습니다.
너비: {{rectWidth}}
높이: {{rectHeight}}
면적: {{area}}
실제 적용 시나리오
1. 폼 유효성 검사
{{usernameError}}
{{emailError}}
2. 테마 설정
설정: {{settings.theme}}
저장 상태: {{saveStatus}}
주의사항
- 수신된 데이터 수정 피하기: 감시자 콜백에서 수신된 데이터를 수정하면 무한 루프가 발생할 수 있습니다. 수정이 필요한 경우 적절한 조건 판단을 추가하세요.
- 계산 속성 사용 고려: 여러 데이터의 변화에 따라 새 값을 계산해야 하는 경우, 감시자 대신 계산 속성을 사용하는 것을 권장합니다.