vue에서 refs를 사용하여 dom을定位할 때 undefined가 나타나는 문제 해결 방법

회사에서 프로젝트를 할 때, ref를 사용하여 DOM 노드를 위치시키는 것이 매우 편리하다고 느꼈습니다. 그러나 중간에 문제가 발생했습니다.那就是在mounted(){} 헬퍼에서 this.$refs.xxx를 사용하여 출력된 것은 undefined입니다?

그래서 저는 이전에 사용한 ref 위치를 기반으로 한 .vue 파일과 비교해 보았고, 그들 간의 차이를 발견했습니다.

어떻게 그 DOM 노드를 찾을 수 없는지 알고 싶다면, 먼저 mounted(){} 헬퍼 함수가 무엇을 위해 사용되는지 이해해야 합니다.

아래는 vue 공식에서 제공하는 vue 라이프사이클(부분)입니다. 공식에서 말한 것처럼, 처음에는 이해할 필요가 없지만, 그러한 학습과 사용과 함께 참고 가치가 점점 더 높아집니다.

　

mounted 단계에서 DOM 구조가 준비되었지만, 여기서의 준비된 것은 특별히 설명해야 합니다:

DOM 구조가 이미 생성되었지만, DOM 구조 내의 특정 DOM 노드에서 v-if, v-show 또는 v-for(이는 백엔드 데이터를 기반으로 DOM을 동적으로 처리하는 것을 의미합니다. 즉, 반응형), 이러한 DOM은 mounted 단계에서 더 이상 찾을 수 없습니다.

이时的 mounted 단계는 일반적으로 백엔드 요청을 시작하고 데이터를 가져오기 위해 사용되며, 라우팅 헬퍼와 함께 일을 하기 위해 사용됩니다. 간단히 말해서 mounted 헬퍼에서 데이터를 로드하는 것뿐입니다. 로드된 데이터는 이 단계에서 DOM에서 더 이상 업데이트되지 않습니다.

따라서 mounted 헬퍼에서 $refs를 사용하면, ref가 v-if, v-for, v-show에서의 DOM 노드는 undefined만이 반환될 수 있습니다. 왜냐하면, mounted 단계에서 그들은 존재하지 않기 때문입니다！！

검증된 결과, 위의 문장은 잘못되었습니다. $refs가 위치를 찾을 수 없는 주요 원인은 v-if, v-for, v-show 이 문장이 부모 컴포넌트에서 전달된 매개변수에 의존하는 경우, 이 매개변수는 mounted() 단계에서 아직 얻을 수 없습니다~~~~！！

DOM이 완전히 로드된 후에 데이터를 실제로 가져오기 위해 VUE의 전역 API를 호출해야 합니다: this.$nextTick(() => {})

mounted 단계가 로드 단계라면, updated 단계는 데이터가 DOM에 업데이트된 단계(로드된 데이터를 처리하는 단계)입니다. 이 때, ref, 데이터 등이 모두 DOM 구조에 부착되고, update 단계에서 this.$refs.xxx를 사용하면100%가 해당 DOM 노드를 찾을 수 있습니다.

updated와 mounted의 차이점은, 매번 DOM 구조가 업데이트될 때마다 vue가 updated(){} 헬퍼 함수를 호출한다는 것입니다! 반면에 mounted는 단 한 번만 실행됩니다.

간단히 말해서, 디버깅 중에 요소가 존재한다면, updated 단계에서 this.$refs.xxx를 사용하여 해당 DOM 노드를 찾을 수 있습니다!

refs의 사용에 대한 공식 문서에서 특별히 다음과 같은 제안이 주어졌습니다:

　

사용할 때 주의하세요- -

이것이 이 문서의 전체 내용입니다. 많은 도움이 되었기를 바랍니다. 또한, 나의呐喊 교본에 많은 지지를 부탁드립니다.

선언: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권은 원작자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 이 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있다면, notice#w로 이메일을 보내 주세요.3codebox.com（보고할 때는 #을 @으로 변경하십시오. 관련 증거를 제공하고, 사실이 확인되면, 이 사이트는 즉시 의심스러운 저작권 내용을 삭제합니다.