# deep watch
## deep watch
감시자를 이용하다 보면 객체나 배열을 감시해야 하는 경우가 발생한다. 이 때 일반적인 감시자를 이용하면 정상적으로 감시가 이루어지지 않는 상황이 발생한다.
아래의 예제를 통해 확인한다.
```html
Vue deep watch
revision count : {{revision}}
```
{% embed url="" %}
data에 `board`라는 이름의 객체가 존재하며, 객체 안에는 title과 content라는 세부 항목이 존재한다.
```javascript
data(){
return {
board:{
title:"Welcome to Vue JS 3!",
content:"VueJS는 사용자 인터페이스를 만들기 위한 progressive framework 입니다."
},
revision:0
};
},
```
입력창은 객체가 아니라 객체 안의 항목인 `title`, `content`에 연결되어 있다.
```markup
```
이 경우 객체의 내부 값이 변했다고 해서 객체가 변했다고 할 수 있을까? 그렇지 않다. 사람의 경우도 이름을 바꾼다고 해서 다른 사람이 되지 않듯이 객체도 내부의 값이 변경되었다고 해서 객체가 변화했다고 볼 수 없다. 따라서 일반적인 감시자로는 변화를 감지해낼 수 없다.
### 사용법
내용물의 변화까지도 감시자로 감지하고 싶은 경우 사용할 수 있는 것이 깊은 감시(deep watch)이다.
깊은 감시는 다음과 같이 객체형태로 설정한다.
```javascript
watch:{
항목명:{
deep:true,
handler(v, p){
}
}
},
```
### 사용 예제 - 깊은 감시 적용
```markup
Vue deep watch
revision count : {{revision}}
```
{% embed url="" %}
실행해보면 정상적으로 잘 감시가 되는 것을 확인할 수 있다.
### immediate
감시자 객체에 immediate 속성을 설정하면 Vue instance 실행 후 최초 1회는 대상의 변화가 없어도 실행된다.
```markup
Vue deep watch
revision count : {{revision}}
```
{% embed url="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.sysout.co.kr/web/develop-page/js/vuejs/cdn-vue3/vue-instance/watch/deep-watch.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.