2022년 3월 28일 개발일지

오늘은 vue watch 속성에 대해서 공부했습니다 .

 

우선 watch 라는 속성은 , react로 치면 그 목적이 useEffect 와 매우 흡사합니다 .

어떠한 state값이나 propr값이 변하면 , 변할때마다 어떠한 행위를 ( 함수를 실행시킨다던가 ) 할 수 있습니다 .

비동기식 , 시간이 많이 소요되는 조작을 수행하려는 경우에 유용하다고 하는데  , 제생각에는 대부분 lifecycle hook을 통해서 조작하면 많을 것들을 해결할수 있지않을까 ? 하는 생각이 들긴 합니다 .

 

watch속성에는 2개의 옵션이 있습니다 , immediate와 deep이 있습니다 .

이 옵션을 주기위해서는 hanlder function을 사용해야하고 , handler는 감시 대상 데이터가 변했을때 실행이 되는 함수입니다 .

 

Vue.js 에서 어떠한 data를 console을 찍어보면 ,

객체밑에 객체가 있고 , 그 객체밑에 객체가 있는 , nested되어진 구조를 가지고 있는데 ,

만약 최상위 state값을 변경하기 위해 그 밑 객체의 변화를 감지해야한다면 ,

watch 속성에서 deep: true 를 주면 됩니다 . deep속성은 감시 대상 데티터가 하위 속성을 가지고 있는 객체의 경우 , 그 하위 속성의 변경까지 감지시킵니다 .

immediate속성은 컴포넌트가 호출되었을때 , 그 컴포넌트의 watch 대상 데이터를 바로 읽을지 여부를 결정하는것입니다 .

false이면 대상 데이터가 변경이 일어났을때 , watch에서 지정한 로직이 수행되고 , true이면 컴포넌트가 호출될때 자동으로 실행됩니다 .

created()와 비슷하죠 .

 

코드로 작성을 해보면 ,

 

watch : {
     inputTitle1: {
     handler(newVal , oldVal) {
         //감시 대상 데이터가 변경되면 로직 수행
         console.log(The new value is `${newVal}` , old value was `${oldVal}`)
        },
        deep : true ,
        immediate : true
  	}, 
    inputTitle2(newVal , oldVal) {
        console.log(newVal , oldVal)
    }
}

 

 

inputTItle1 이라는 state가 변경이 되면 , 혹은 컴포넌트가 생성이 되면 console.log를 실행하고 , deep: true 이기 때문에 하위 객체의 변화도 감지합니다 .

 

inputTitle2라는 state가 변경이되면 console.log를 실행시킵니다 . 따로 옵션이 없기 때문에 state가 변경이 되어야만 실행시킵니다 .