티스토리 뷰

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 등을 이용해서 데이터를 운용하는 것이 바람직하다.

'dev > vue3' 카테고리의 다른 글

커스텀 컴포지션 함수  (0) 2025.01.25
Lifecycle API 사용하기, mounted  (0) 2025.01.25
computed API란?  (0) 2025.01.25
composition API에서는 왜 setup에서 .value로 접근해야 할까?  (0) 2025.01.25
Composition API란 무엇인가?  (0) 2025.01.22
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/04   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함