refs를 사용하여 vue 및 정의되지 않은 dom을 찾는 방법에 대한 자세한 설명이 나타납니다.

저는 항상 ref를 사용하여 DOM 노드를 찾는 것이 매우 편리하다는 것을 알았습니다. 그런데 해당 기간 동안, 즉 mount(){} 후크에서 this.$refs.xxx를 사용할 때 인쇄된 값이 정의되지 않는 문제가 발생했습니다.

그래서 이전에 ref를 사용하여 위치를 지정했던 .vue 파일을 비교해서 차이점을 찾아봤습니다. 이 글에서는 주로 Vue에서 DOM에서 undefine을 찾기 위해 refs를 사용하는 문제에 대한 해결책을 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

특정 DOM 노드를 찾을 수 없는 이유를 알고 싶다면 먼저 Mounted(){} 후크 함수가 어떤 용도로 사용되는지 이해해야 합니다.

다음은 Vue 공식에서 제공하는 Vue 라이프 사이클(일부)입니다. 관계자의 말대로 처음에는 이해할 필요는 없지만 배우고 사용할수록 참조 가치는 점점 더 높아질 것입니다. .

마운트된 단계에서 DOM 구조가 준비된 것으로 나타났습니다. 그러나 여기의 준비에는 특별한 설명이 필요합니다.

DOM 구조가 나왔지만 v-if, v-show 또는 v-for인 경우 (즉, 획득한 배경 데이터를 기반으로 DOM을 동적으로 운영하는 것, 즉 반응형), 이러한 DOM은 탑재된 단계에서 발견되지 않습니다.

이때 마운트된 단계는 일반적으로 백엔드 요청을 시작하고, 데이터를 가져오고, 라우팅 후크를 사용하여 몇 가지 작업을 수행하는 데 사용됩니다. 간단히 말하면, 마운트된 후크에 데이터를 로드하는 것뿐입니다.

업데이트된 DOM에서 따라서 마운트된 후크에서 $refs를 사용하는 경우 참조가 v-if, v-for, v-show를 사용하여 DOM 노드에 배치되면 반환된 값은 정의되지 않을 수만 있습니다. , Mounted Stage에서는 전혀 존재하지 않기 때문입니다! !

검사 결과 위의 텍스트가 잘못되었습니다. $refs를 찾을 수 없는 주된 이유는 v-if, v-for 및 v-show와 같은 문이 상위 구성 요소가 전달한 매개 변수에 의존하는 경우 매개 변수가 다음과 같기 때문입니다. Mounted() 단계는 아직 획득되지 않았습니다~~~~! ! ! !

DOM이 로드된 후 실제로 데이터를 얻으려면 VUE의 전역 API를 호출해야 합니다: this.$nextTick(() => {})

마운트된 단계가 로드 단계인 경우 업데이트 단계 DOM에 대한 데이터 업데이트(로드된 데이터 처리) 단계가 완료됩니다. 이때 ref, 데이터 등은 모두 업데이트 단계에서 사용됩니다. 100% DOM 노드를 찾을 수 있습니다.

업데이트된 것과 마운트된 것의 차이점은 DOM 구조가 업데이트될 때마다 vue가 update(){} 후크 함수를 호출한다는 것입니다! 그리고 Mounted는 한 번만 실행됩니다

간단히 말하면 디버깅 중에 요소의 존재를 볼 수 있는 한 this.$refs.xxx를 사용하여 업데이트된 단계에서 해당 DOM 노드를 찾을 수 있습니다!

$refs 사용과 관련하여 공식 문서에서는 구체적으로 다음 팁을 제공합니다.

사용 시 주의하세요.

관련 권장사항:

JavaScript에서 정의되지 않은 것과 null 사이의 차이점에 대한 자세한 설명

php 실행 시 정의되지 않은 인덱스 프롬프트에 대한 해결 방법

php 실행 시 정의되지 않은 함수 cur_init() 호출에 대한 해결 방법

위 내용은 refs를 사용하여 vue 및 정의되지 않은 dom을 찾는 방법에 대한 자세한 설명이 나타납니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!