[TIL] Vue watch 옵션(즉시실행, 깊은감시)

JIEUN YANG·2022년 8월 9일
0

1. 즉시 실행 - immediate

화면에 진입하자마자 watch함수를 실행시켜 데이터를 가져오도록 설계된 코드 구조. 그동안 복붙해서 사용했기 때문에 깊게 생각하지 않고 적용했었는데 오늘 이렇게 삽질(?)을 하게 될 줄은 몰랐다.. 복붙의 폐해

watch는 감시 대상 데이터를 바라보고 있다가 해당 데이터가 변경되었을 때 실행되는데, 변경이 없더라도 watch 함수를 능동적으로 실행 가능하도록 설정해주는 핸들러가 'immediate' 라는 녀석이다.
즉, 초기 렌더링 때 watch가 즉시 발동하도록 해준다.

결과 코드를 먼저 보자면 아래와 같다.

watch(
  params,
  params => {
    console.log('watch실행 테스트')
    store.commit('setParams', {
      state.title,
      params,
    })
  },
  {
    immediate: true, // 초기 렌더링 시점 호출 여부 설정
    deep: true, // 중첩 데이터 감시 여부 설정
  },
)

immediate 를 설정해줌으로써 params 변수의 변경이 없어도 watch가 트리거되어 콘솔 내용이 출력된다.
이슈 해결 전, 트리거가 일어나지 않았던 이유는 오타 때문이었다...

imeditate -> immediate

로 변경하니 바로 해결되었으나 날린 1시간이 너무 허무했다.

2. 깊은 감시 - deep

감시대상이 중첩 구조일 때, 감시 여부를 설정해줄 수 있다.

profile
violet's development note

0개의 댓글