Colección de preguntas de la entrevista de Vue

1. ¿Cuáles son los ciclos de vida de vue?

2. ¿Qué funciones del ciclo de vida se ejecutarán al ingresar a la página?

antes de crear, creado, antes de montar, montado

3. ¿Dónde se puede acceder a los datos? /p>

no se puede acceder en beforeCreate

Hay el en creado

Hay el en beforeMounte

Está disponible en mouted, incluidos los posteriores funciones de gancho de ciclo de vida

4. Si se agrega keep-alive, se agregarán dos funciones de ciclo de vida

activadas y desactivadas

Activado se activa al ingresar. la página, y se desactiva al salir de la página

5. Si agrega el componente keep-alive, qué ciclos de vida se activarán al ingresar a la página por primera vez

beforeCreate, creado, beforeMounted, montado, activado

6 Si se agrega el componente keep-alive, ¿qué ciclos de vida se activarán al ingresar a la página por segunda o enésima vez?

Solo se activa un ciclo de vida: activado (porque la página se ha almacenado en caché)

1. ¿Qué es?

Un componente que viene con vue, usado Para almacenar en caché los componentes y mejorar el rendimiento, keep-alive puede guardar el estado del componente empaquetado cuando se cambia el componente para que no se destruya.

2. Parámetros

incluir: indica que solo se almacenarán en caché los componentes coincidentes

excluir: indica que los componentes coincidentes no se almacenarán en caché;

p>

3. Ciclo de vida

Hay dos funciones de ciclo de vida, las mismas que las anteriores

4. Escenarios de uso

- Lista la página salta a la página de detalles Cuando el usuario hace clic para saltar, la página de detalles tendrá que solicitar datos cada vez. Si el usuario hace clic en la misma página cada vez, entonces no es necesario volver a solicitar la página de detalles. almacenarse en caché directamente si el clic no es Reiniciar la misma solicitud

- Úselo en la vista del enrutador para almacenar en caché los componentes de enrutamiento

1. Puntos similares

Puedes controlar la visualización de elementos Ocultar

2. Diferencia

v-if controla la visualización y ocultación de elementos creando/destruyendo elementos dom, v-show controla la visualización y ocultación de elementos a través de display:none del atributo css

3. Escenario

Cambiar con frecuencia a v-show ahorrará rendimiento; de lo contrario, use v-if

1. Cuando el proyecto usa keep-alive, se puede usar con el nombre del componente para el filtrado de caché

Cuando usamos el componente de caché keep-alive, la función montada en el componente almacenado en caché solo se ejecutará una vez y no se volverá a activar la segunda vez que ingrese a la página. Hay dos métodos, uno es usar activado() para realizar operaciones en el modo montado; el otro es agregar un filtro en keep-alive, como se muestra a continuación:

El atributo de exclusión sirve para ignorar los componentes coincidentes.

2. Cuando DOM se usa como componente recursivo

Cuando el componente necesita llamarse a sí mismo

3. Cuando se usa vue-tools

El nombre del componente que se muestra en la herramienta de depuración vue-devtools está determinado por el nombre del componente en vue

La prioridad de v-for es mayor que la prioridad de v-if, que se especifica en el código fuente, y v-for y v-if no se pueden usar al mismo tiempo. Usarlos al mismo tiempo desperdiciará rendimiento. Por ejemplo, cuando sepa que la condición de juicio es falsa, aún necesitará recorrer los datos. , por lo que normalmente ponemos v-if en v- para afuera.

Se utiliza para obtener el contenido dom actualizado y el método es asincrónico.

La función es retrasar la ejecución de la función de devolución de llamada hasta el próximo ciclo de actualización de dom porque Vue se actualiza. los datos de forma asincrónica Sí, si modifica los datos en los datos, la vista no se actualizará inmediatamente. Vue colocará sus modificaciones en una cola de observación después de que se actualicen todos los datos en el mismo bucle de eventos. Intente actualizar nuevamente, habrá un retraso.

El escenario de uso más común es que al obtener el elemento dom creado, debe usar $nextTick para obtenerlo

Los datos en el componente se escriben como una función y los datos se definen en forma de valor de retorno de función. De esta manera, cada vez que se reutiliza un componente, se devolverán nuevos datos, lo que equivale a crear un espacio de datos privado para cada instancia de componente, lo que permite que cada instancia de componente se mantenga. sus propios datos. Simplemente escribirlo en forma de objeto hará que todas las instancias de componentes usen una copia de datos, lo que conducirá a un resultado en el que todo cambiará si cambia.

Cuando el componente principal pasa datos al componente secundario, el componente secundario solo puede leer los datos y no puede modificarlos, porque cuando el componente secundario modifica los datos pasados ​​por el componente principal , otras referencias al componente principal El componente de los datos del componente también se modificará, lo que provocará un error. Sin embargo, no se sabe si el componente actual informa un error, el componente principal informa un error o el subcomponente. modifica la información del componente principal

Si desea modificarlo, puede pasar esto. El método $emit envía eventos personalizados y se modifica en el componente principal

modo Hash; modo historial, el valor predeterminado es el modo hash

Las diferencias son las siguientes:

1. Las expresiones son diferentes, el hash está representado por # y el historial está representado por /; p>

2. El valor hash no se enviará al servidor, pero el historial se enviará al servidor. Si la ruta correspondiente no coincide, se debe configurar la página de ruta correspondiente.

3. Los métodos de adquisición son diferentes, el valor hash se puede obtener a través de location.path y el historial se puede obtener a través de location.pathname

4. El valor hash se puede monitorear a través de la ventana; .onhashchange Los cambios en el historial

se pueden monitorear a través de onpopstate;

La etiqueta de plantilla en el ensamblaje se compilará en una función de renderizado y el elemento dom se creará a través de la función de renderizado. , y luego se convierte en dom virtual y finalmente se convierte en For real dom

1. Virtual dom es un objeto js, ​​que utiliza atributos de objeto para describir nodos. Es una capa de abstracción de dom real

2. Debido a que la velocidad de ejecución de dom es mucho más lenta que la que JS ejecuta rápidamente, el DOM real se abstrae en un objeto JS y luego los nodos que realmente necesitan actualizarse se calculan mediante algoritmos, reduciendo así una gran número de operaciones DOM.

3. Convierta la operación directa de DOM en dos objetos js para comparar, descubra las diferencias y realice actualizaciones locales para mejorar la eficiencia de ejecución.

Continuará...