Cómo utilizar el posicionamiento de referencias en vue
Cuando hacía proyectos en la empresa, siempre me resultaba muy conveniente utilizar ref para localizar nodos dom. Pero mientras tanto, encontré un problema que al usar mount(){} dentro de este gancho.$refs.xxx, ¿la impresión no está definida?
Así que comparé los archivos .vue previamente colocados usando ref y encontré las diferencias entre ellos.
Para comprender por qué no se puede ubicar el nodo DOM, primero debemos comprender el propósito de la función de enlace montada(){}.
El siguiente es el ciclo de vida (parte) proporcionado oficialmente por vue. Como dijo el funcionario, no es necesario que lo comprenda al principio, pero a medida que lo aprenda y lo use, su valor de referencia lo hará. llegar a ser cada vez más alto.
Originalmente, durante la fase de montaje, la estructura DOM está lista, pero aquí debemos explicar lo que está listo:
La estructura DOM sale, pero si la estructura DOM El DOM El nodo utiliza v-if, v-show o v-for (es decir, opera dinámicamente el DOM en función de los datos de fondo obtenidos (es decir, responsivo).
Si estos DOM no se utilizan en la fase de montaje, entonces en Estos DOM ya no se encontrarán durante la fase de montaje.
La fase de montaje generalmente se usa para iniciar solicitudes de backend, obtener datos de retorno y operar usando ganchos de enrutamiento. En pocas palabras, se carga en el gancho de montaje. , y los datos cargados nuevamente no se encontrarán en el DOM actualizado durante la fase de montaje
Entonces, si usa $refs en el gancho de montaje, entonces si la referencia se encuentra usando v-if, v. -for O en el nodo DOM de v-show, puede usar $refs en el gancho de montaje, el resultado devuelto no estará definido porque no existen en la fase de montaje.
¡Después de la prueba, finaliza! De lo anterior El texto es incorrecto. La razón principal por la que no se pueden ubicar $refs es que si estas declaraciones como v-if, v-for y v-show dependen de los parámetros pasados por el componente principal, los parámetros no lo son. obtenido en los nodos secundarios de la etapa montada()~ ~~~!
Si realmente desea obtener los datos después de la carga del DOM, debe llamar a la API global de VUE: this.$nextTick(( )=gt;{})
Si la fase de carga es la fase de carga, entonces la fase de actualización es la fase de actualización de los datos al DOM (procesando los datos cargados En este momento, la carga). La fase es la fase de actualización de datos. En este momento, se han cargado referencias, datos, etc. En la estructura DOM, puede usar this.$refs.xxx para encontrar el nodo DOM durante la fase de actualización. >
La diferencia entre Actualizado y montado es que vue llamará a actualizado() cada vez que se actualiza la estructura DOM. {} función de enlace. ¡Y montado solo se ejecuta una vez
En pocas palabras, siempre que usted Puedes ver la existencia del elemento durante la depuración, puedes usar this.$refs.xxx para encontrar el DOM correspondiente durante la fase de actualización Node!
Con respecto al uso de $refs, la documentación oficial proporciona específicamente el siguientes consejos:
Lo anterior es lo que he recopilado para usted. Espero que sea útil para su trabajo futuro.
Artículos relacionados:
Cómo implementar orden mediante clasificación y consulta difusa en Angular
Cómo implementar visualización oculta en Angular
Cómo Utilice el servidor reaccionar-router en BrowserRouter