Soluzione per l'errore undefined quando si utilizza refs in Vue per localizzare dom

In precedenza, durante la realizzazione di progetti in azienda, ho sempre sentito che utilizzare ref per localizzare nodi DOM è molto comodo. Ma durante il processo, ho incontrato un problema, ovvero che all'interno del hook di mounted(){} utilizzando this.$refs.xxx, viene stampato undefined?

Quindi ho fatto una comparazione tra i file .vue che utilizzavano ref prima, e ho scoperto le differenze tra loro.

Per sapere perché non si riesce a trovare un nodo DOM, dobbiamo prima capire cosa fa la funzione di hook mounted(){}.

Di seguito è riportato il ciclo di vita ufficiale di Vue (parziale) fornito da Vue ufficiale, come dice l'ufficiale, all'inizio non è necessario capirlo, ma man mano che impari e utilizzi, il suo valore di riferimento crescerà sempre di più.

　

In realtà, nel hook di mounted, la struttura del DOM è pronta, ma è necessario spiegare chiaramente che questa prontezza:

La struttura del DOM è già stata creata, ma se in una struttura del DOM esiste un nodo DOM che utilizza v-if, v-show o v-for (cioè operare dinamicamente il DOM in base ai dati ricevuti dal backend, ossia in modo reattivo), questi DOM non saranno trovati nel hook di mounted.

Il hook di mounted in questo momento è generalmente utilizzato per inviare richieste backend, ottenere dati, fare qualcosa con i hook di rotta, in altre parole, caricare i dati nel hook di mounted, i dati caricati non saranno aggiornati nel DOM in questa fase

Quindi, se si utilizza $refs nel hook di mounted, se il ref è posizionato su un nodo DOM con v-if, v-for, v-show, il risultato sarà sempre undefined, perché a quel punto essi non esistono!!

经过检验，上面端文字是错误的，$refs定位不到的主要原因是因为v-if、v-for、v-show这些语句如果依赖父组件传来的参数的话，该该参数是在mounted()阶段子还没获取得到~~~~！！！！

Se si desidera effettivamente ottenere i dati una volta completato il caricamento del DOM, è necessario chiamare l'api globale di VUE: this.$nextTick(() => {})

Se il fase mounted è la fase di caricamento, allora la fase updated è la fase in cui i dati vengono aggiornati nel DOM (elaborazione dei dati caricati), a questo punto, ref, dati ecc. vengono montati sulla struttura del DOM, durante la fase di update l'uso di this.$refs.xxx può trovare il nodo DOM con il 100% di probabilità.

Diversamente da mounted, ogni volta che la struttura del DOM viene aggiornata, Vue chiama una volta il hook funzionale updated(){}! Mentre mounted viene eseguito una sola volta.

In sintesi, è sufficiente che durante il debug si possa vedere l'esistenza dell'elemento, in fase di updated è possibile utilizzare this.$refs.xxx per trovare il nodo DOM corrispondente!

Riguardo all'uso di $refs, la documentazione ufficiale ha fornito le seguenti istruzioni:

　

Attenzione quando si utilizza - -

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento, e speriamo che tutti sosteniate il tutorial di urla.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato elaborato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente i contenuti sospetti di violazione del copyright.