dev/vue3

watch란?

dev_0hoon 2025. 1. 25. 09:44

watch API도 컴포지션 API에서 사용하는 watch 속성을 의미한다.

 

watch 속성

watch API

    export default {
        props:['todoItems', 'userId'],
        setup(props, context) {
            function remove(item,index) {
                localStorage.removeItem(item);
                context.emit('remove',index);
            }

            watch(props.todoItems, (newValue)=>{
                console.log({newValue}); 
            })

            return {remove}
        }
    }

 

위처럼 watch를 사용하면 todoItems가 바뀔 때마다 그 새롭게 바뀐 값이 newValue로 넘어온다.

 

watch는 최대한 사용하지 않는 것이 좋다. 많아지면 추적이 어렵기 때문이다. 기존의 emit, props 등을 이용해서 데이터를 운용하는 것이 바람직하다.