vue에서 nextTick의 역할

인턴십을 하면서 그런 장면을 접하게 되었습니다.회전 탭이 있습니다.클릭할 때마다 현재 옵션이 중앙에 위치해야 합니다.즉,컨테이너 중앙에 그런 다음 scrollTo 메소드를 사용하거나 컨테이너의 scrollLeft 속성을 설정합니다. 깨달을 수는 있지만 문제는 여기서 어떻게 설정해도 효과가 안 나고 마지막으로 nextTick 방식이 정상적으로 동작하게 됩니다. 이번에 배우게 됩니다~

changeEffect() {
    
    
  this.$nextTick(() => {
    
    
    let offsetWidth = this.$refs.scrollItem[this.currentProductIndex].offsetWidth; //item
    let scrollLeft = this.$refs.scrollItem[this.currentProductIndex].offsetLeft; //选中的元素滚到可视区域的最左边
    const containWidth = this.$refs.scrollBox.offsetWidth; //容器的宽度
    let resultSpot = scrollLeft - containWidth / 2 + offsetWidth / 2; //最终要停留的点
    this.$refs.scrollBox.scrollTo(resultSpot, 0)
  })
},

공식 설명을 살펴보겠습니다.
Vue에서 반응형 상태를 변경하면 최종 DOM 업데이트가 동기적으로 유효하지 않지만 Vue는 다음 "틱" 구현까지 대기열에 캐시합니다. 이는 얼마나 많은 상태 변경이 발생하더라도 각 구성 요소가 한 번만 업데이트되도록 하기 위한 것입니다.
nextTick()은 DOM 업데이트가 완료될 때까지 기다리기 위해 상태 변경 직후에 사용할 수 있습니다. 콜백 함수를 인수로 전달하거나 반환된 Promise를 기다릴 수 있습니다.

그 의미는 자명합니다.. 렌더링 효율을 높이기 위해 Vue는 데이터가 변경될 때마다 뷰를 업데이트하지 않고 변경 사항을 큐에 저장하고 큐의 변경 사항이 특정 숫자 또는 특정 기간에 도달하기를 기다립니다. 업데이트 전 시간 보기.
그런 다음 데이터를 수정한 직후에 DOM 실행 결과를 보고 싶을 때 nextTick 메서드를 사용해야 합니다.

요약: vue의 비동기 업데이트 메커니즘으로 인해 dom 작업을 수정한 효과를 즉시 볼 수 없는 경우가 있습니다. 효과를 즉시 보려면 nextTick에서 수정해야 합니다.