형식에서 각 속성의 의미는 다음과 같습니다.
표 3-3 watch 옵션 속성
속성 |
설명 |
dataOrComputed |
데이터(data)나 계산된 속성(computed)의 키(key)를 적습니다. |
handler.newVal, oldVal) |
변경 사항이 있을 때 실행할 함수를 정의합니다. 이 함수는 새로운 값(newVal)과 이전 값(oldVal)을 매개변수로 받습니다. |
deep |
중첩된 객체 또는 배열의 내부 변경을 감시할지 설정합니다. true면 감시하고, false면 감시하지 않습니다. 기본값은 false입니다. |
immediate |
초기 렌더링 시 콜백 함수를 호출할지 설정합니다. true면 호출하고, false면 호출하지 않습니다. 기본값은 false입니다. |
flush |
콜백 함수의 실행 타이밍을 결정합니다. 데이터 변경이 뷰에 반영되고 콜백 함수가 호출되길 원하면 'post', 뷰에 반영되기 전에 콜백 함수부터 호출되길 원하면 'pre', 하나의 동작에 여러 번 변경되더라도 동기적으로 모든 변화를 감시하고 싶다면 'sync'입니다. |
once |
Vue 3.4에서 추가된 속성으로 once 속성의 값을 true로 지정하면 변경 사항을 한 번만 감시합니다. |
예제 코드를 객체나 배열의 변화를 감시할 수 있도록 깊은 사용법으로 개선하면 다음과 같습니다.