watch 속성의 flush 옵션

Yudrey·2022년 4월 27일
0

Vue.js

목록 보기
2/2

watch 속성을 사용하여 데이터 호출 타이밍을 제어하고자 한다면?
프로젝트 진행 시, watch 구문에서 DOM이 모두 렌더링 된 이후의 시점을 알아야 하는 상황이 있었는데 이때 watch 속성의 flush 옵션을 사용하여 이슈를 해결함

watch Option

flush

  • 콜백 타이밍을 보다 잘 제어 가능
  • 'pre', 'post' 또는 'sync'로 설정 가능
  • 기본 값은 'pre'
    • 렌더링 전에 콜백을 호출해야 함을 지정
    • 템플릿이 실행되기 전에 콜백이 다른 값을 업데이트 가능
  • 'post'
    • 렌더링이 끝날 때까지 콜백을 연기하는데 사용
    • 콜백이 $refs를 통해 업데이트 된 DOM 또는 하위 컴포넌트에 접근해야하는 경우에 사용
  • 'sync'
    • 콜백은 값이 변경되는 즉시 동기적으로 호출
	watch: {
        test: {
            deep: true,
            flush: 'post',  // 컴포넌트가 업데이트 된 이후에 호출 되어 DOM에 접근할 수 있음
            handler(newVal) {
                ...
            },
        },
	},

참고 사이트
https://yamyam-naengmyeon-donkats.tistory.com/63
https://v3.vuejs-korea.org/ko-kr/api/instance-methods.html

profile
Frontend Developer

0개의 댓글