Watch

• 반응형 상태가 변경되었을때에 감지하여 다른 작업 (api call 등)을 수행해야 하는 경우 사용하는 함수.
• 어떠한 상태가 변경되었을때 DOm을 변경하거나 비동기 작업을해서 다른 상태를 변경하는 것

<script>
watch(변경감지할 데이터 , (새로운 값, 기존 값)=>{
	/*처리 로직*/
});
</script>

<script>
//특정 값의 합이 변경될경우 감지
watch(() =>  x.value+ y.value, (sum,oldValue) =>{
    console.log(sum);
	console.log(oldValue);
})

// 값 여러개중 하나라도 변경감지
watch([x, y], ([newX, newY]) => {
    console.log(newX);
    console.log(newY);
})

// 객체의 속성중 하나라도 변경될경우 감지
watch(obj,(newValue,oldValue)=>{
      console.log(newValue);
      console.log(oldValue);
})

//객체안의 하나의 속성으로 감지하려면 Getter함수를 사용해야함
// 객체안의 속성은 반응형값이아닌 number,string같은 값이기 때문
watch (()=> obj.count ,(newValue,oldValue)=>{ /
      console.log(newValue);
      console.log(oldValue);
    });
</script>

Deep Option

• 반응형 객체를 직접 Watch()하면 암시적으로 깊은 감시자가 생성 즉, 속성 뿐만 아니라 모든 중첩된 속성에도 트리거가 된다.
• Getter Function으로 객체를 넘길 경우에는 객체의 값이 바뀔 경우에만 트리거가 됨 즉 중첩된 속성은 트리거되지 않음

watch( ()=> person.obj , newValue =>{
      console.log(newValue);
    })

• Obj안의 count가 변화해도 watch 작동 X obj 자체가 변경될 경우 작동