Método de solución al problema de undefined en la ubicación de DOM con refs en vue

En el proyecto de la empresa anterior, siempre sentí que usar ref para localizar nodos DOM era muy conveniente. Pero durante este período, me encontré con un problema, es decir, al usar this.$refs.xxx en el gancho mounted(){} y printear, el resultado es undefined?

Por lo tanto, comparé el archivo .vue que utilizaba ref anteriormente y descubrí las diferencias entre ellos.

Para saber por qué no se puede localizar un nodo DOM determinado, primero debemos entender para qué se utiliza la función de gancho mounted(){}.

A continuación, se muestra el ciclo de vida de Vue proporcionado por Vue oficial (parcial), como dice oficialmente, al principio no es necesario entenderlo, pero a medida que aprendes y usas, su valor de referencia aumentará cada vez más.

　

Originalmente, en la etapa de mounted, la estructura del DOM está lista, pero aquí se necesita hacer una aclaración especial sobre la lista:

La estructura del DOM ya está lista, pero si en algún nodo del DOM se utiliza v-if, v-show o v-for (es decir, operar dinámicamente el DOM según los datos obtenidos del backend, es decir, reactividad), estos DOM ya no se encontrarán en la etapa de mounted.

En esta etapa de mounted, generalmente se utiliza para iniciar solicitudes de backend, recuperar datos, y realizar algunas tareas junto con los ganchos de ruteo, en términos simples, es solo cargar datos en el gancho de mounted, los datos cargados no se actualizarán en el DOM en esta etapa

Por lo tanto, si se utiliza $refs en el gancho de mounted, si el ref está ubicado en v-if, v-for, v-Los nodos DOM en show, que regresan solo pueden ser undefined, porque en la fase de mounted, ellos simplemente no existen!!

Después de la inspección, el texto superior es incorrecto, la razón principal por la que $refs no puede ubicarse es porque v-if, v-for, v-Las instrucciones show dependen de los parámetros transmitidos por el componente padre, estos parámetros aún no se han obtenido en la fase de mounted() ~ ~ ~ ~ ~

Si desea realmente obtener los datos después de que se complete la carga del DOM, es necesario llamar a la api global de VUE: this.$nextTick(() => {})

Si el estado de mounted es el estado de carga, entonces el estado de updated es el estado en el que se completan las actualizaciones de datos al DOM (el procesamiento de los datos cargados), en este momento, ref, datos, etc., se montan en la estructura del DOM, en la fase de update se puede usar this.$refs.xxx, es100% puede encontrar este nodo DOM.

La diferencia entre updated y mounted es que, cada vez que se actualiza la estructura del DOM, Vue llama una vez a la función del ganch de updated(){}! Mientras que mounted solo se ejecuta una vez.

En términos simples, siempre que pueda ver la existencia del elemento durante la depuración, se puede usar this.$refs.xxx para encontrar el nodo DOM correspondiente en la fase de updated!

Con respecto al uso de $refs, el documento oficial proporciona las siguientes sugerencias especiales:

　

Atención al usarlo- -

Esto es todo el contenido del artículo, espero que ayude a su aprendizaje y que todos los demás lo apoyen en el tutorial de clamor.

Declaración: el contenido de este artículo se obtiene de la red, pertenece al autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente y no asume la responsabilidad legal relevante. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.