실전 코드로 배우는 Vue.js

126

실전 코드로 배우는 Vue.js

city: string;

country: string;

zip: string;

};

}

이 구조에서

user

.

address

.

city

의 변화를 감시하려면 와처 이름에 ‘

user

.

address

.

city

’

를 지정하면 된다. 이렇듯 와처의 관찰 범위를 특정 프로퍼티로 좁히면

deep

와처를 사용할

필요가 없으며 의도치 않은 성능 저하도 방지할 수 있다.

3.6.2

this

.$

watch

() 메서드

대부분의 경우

watch

옵션은 와처의 쓰임새를 감당하기에 충분한다. 그러나 가끔 특정 상황

에서 와처가 작동하지 않아야 하는 경우가 있다. 예를 들어

user

객체의

address

프로퍼티

가

null

이 아닐 때만

user

.

address

.

city

와처를 사용한다고 가정하자. 이 경우 컴포넌트

생성 시

this

.$

watch

()

메서드를 활용하면 조건부로 와처를 생성할 수 있다.

this

.$

watch

()

메서드의 파라미터는 다음과 같다.

●

관찰 대상 데이터의 이름을 나타내는 문자열

●

대상 데이터의 값이 변경될 때 실행할 와처의 핸들러 콜백 함수

this

.$

watch

()

가 반환한 함수를 호출하면 해당 와처가 중지된다. [예제

3

-

19

]의 코드는

user

.

address

.

city

의 변화를 관찰하는 와처를

this

.$

watch

()

메서드로 ...