offsetTop에서 얻은 값이 올바르지 않습니다.

DOM 구조의 특정 DOM 노드가 v-if, v-show 또는 v-for(즉, 획득한 배경 데이터를 기반으로 DOM을 동적으로 동작시키는 것, 즉 반응형)를 사용한다면, 이러한 DOM은 마운트된 단계에서 발견되지 않습니다.

마운트된 단계는 일반적으로 백엔드 요청을 시작하고, 데이터를 얻고, 라우팅 후크를 사용하여 몇 가지 작업을 수행하는 데 사용됩니다. 간단히 말하면, 마운트된 후크에 데이터를 로드하는 것뿐입니다. 이 단계에서는 로드된 데이터가 DOM에 업데이트되지 않습니다. 따라서 마운트된 후크에서 $refs를 사용할 때 ref가 v-if, v-for, v-show가 있는 DOM 노드에 있는 경우 반환된 값은 마운트된 단계에 전혀 존재하지 않기 때문에 정의되지 않을 수만 있습니다. .

마운트된 스테이지가 로딩 스테이지라면 업데이트 스테이지는 데이터가 DOM에 업데이트되는 스테이지입니다(이때 로드된 데이터가 처리됩니다). , 찾을 수 있는 DOM 노드는 100개뿐입니다.

업데이트된 것과 마운트된 것의 차이점은 Vue.js가 DOM 구조가 업데이트될 때마다 업데이트된 후크 함수를 호출한다는 것입니다! 마운트된 후크 기능은 한 번만 실행됩니다.

Vue에서 구현한 반응성은 데이터가 변경된 직후 DOM이 변경되는 것을 의미하는 것이 아니라 특정 전략에 따라 DOM이 업데이트된다는 것을 의미합니다.

nextTick을 사용하면 콜백에서 업데이트된 DOM을 얻을 수 있습니다.