Entrevista de desarrollo front-end preguntas de prueba escritas Colección y estímulo 2023 (actualización continua)
1. ¿Para qué sirven v-if y v-show in vue?¿Cuál es la diferencia entre los dos?
Respuesta: Ambos se usan para cambiar, pero la diferencia entre los dos radica en el consumo.v-if consume mucho al cambiar, mientras que v-show solo consume mucho al inicializar, por lo que los dos eligen de acuerdo con diferentes escenarios.
2. ¿Cómo hacer que css solo funcione en el componente actual?
Respuesta: agregue scoped después del estilo actual, por ejemplo, style scoped
3. ¿Cómo implementar la vinculación bidireccional y el principio de vinculación bidireccional?
Respuesta: v-model es un azúcar gramatical para el enlace bidireccional, que a menudo se usa para el enlace bidireccional de datos entre formularios y componentes.
Principio: en dos pasos, v-bind vincula un comando v-on de atributo de valor para vincular el evento de entrada al elemento actual. Se puede ver que cuando v-model está vinculado al formulario, v-model es en realidad v-bind valor vinculante y v -on escucha la combinación de eventos de entrada.
4. ¿Qué es vue-loader? ¿Cuáles son los usos para ello?
Respuesta: un cargador que analiza archivos .vue y convierte template/js/style en módulos js.
Propósito: js puede escribir es6, el estilo puede ser scss o menos, la plantilla puede agregar jade, etc.
5. ¿Qué hace NextTick?
Respuesta: $nextTick es una devolución de llamada retrasada después de que finalice el próximo ciclo de actualización de DOM. Use $nextTick después de modificar los datos, y puede obtener el DOM actualizado en la devolución de llamada.
Escenario: es necesario operar en función de la nueva vista después de que se actualice la vista.
6. ¿Qué es el mantenimiento de la vida?
Respuesta: Keep-alive es un componente incorporado en Vue. Necesita mantener el estado de la página actual en la parte delantera, es decir, en caché. En correspondencia con las dos funciones de gancho activadas y desactivadas, cuando se activa el componente, se activa la función de gancho activada, y cuando se retira el componente, se activa la función de gancho desactivada.
7. ¿Cuál es la función de la llave?
Respuesta: la clave es un identificador único, la función principal es actualizar el dominio virtual de manera eficiente. ¡Recuerde que el valor clave no se puede repetir! ! !
8. La diferencia entre reloj y computado
Respuesta: Ambos son monitores de datos, pero la diferencia es que el reloj consume más rendimiento, lo que va en contra de la optimización del rendimiento de Vue, así que trate de no usarlo. Calculado es cambiar los datos correspondientes cuando los datos cambian. Los nuevos cambios de datos causados por los datos antiguos utilizarán el mecanismo de caché para almacenar en caché los datos. Solo cuando cambien los documentos dependientes se realizarán los cambios correspondientes.
9. ¿Cómo pasar valores entre componentes vue?
Respuesta:
padre a hijo
<!--父组件-->
<Header :msg='msg'></Header>
<!--子组件-->
props:['msg']
props:{
msg: 数据类型
}
padre del niño
<!--子组件-->
this.$emit("自定义事件名称"，要传的数据)；
<!--父组件-->
<Header @childInput='getVal'></Header>
methods:{
getVal(msg){
//msg就是子组件传过来的数据
}
}
Valor de paso del componente hermano
<!--兄弟组件传值-->
通过一个中转bus
A传值：
import bus from '@/common/bus'
bus.$emit("toFooter",this.msg);
B接收：
import bus from '@/common/bus'
bus.$on('toFooter',(data)=>{
//data就是this.msg
})
10. La función de cada carpeta en el proyecto vue
Respuesta:
archivo de entrada main.js
router.js archivo de configuración de enrutamiento front-end
store.js archivo de configuración vuex app.vue vistas del componente
raíz componentes del componente de enrutamiento Otros componentes introducidos en los activos del componente de enrutamiento están en archivos de recursos importados usando rutas relativas en archivos vue
11. ¿Qué es axios? ¿cómo utilizar? Describa el proceso de usarlo para implementar la función de inicio de sesión.
Respuesta: un módulo que solicita recursos en segundo plano. npm install axios -S está instalado,
y luego el envío es entre dominios, que debe establecerse en el archivo de configuración config/index.js.
Si el fondo es Tp5, defina una ruta de recursos. Use importar en js para ingresar,
y luego .get o .post. Regrese en la función .then si tiene éxito,
la falla está en la función .catch
12. Método de proxy de interfaz de solicitud entre dominios de Vue
Respuesta: Configúrelo en config/index.js
y luego reinicie el servicio
axios.get("/api/xxx")
13. El ciclo de vida de vue tiene 4 etapas y 8 funciones de enlace
Respuesta: El ciclo de vida de vue se divide en cuatro etapas
La primera etapa (etapa de creación): beforeCreate, created
La segunda etapa (etapa de montaje): beforeMount (render),
montado Tres fases (fase de actualización): beforeUpdate, actualizado
Fase cuatro (fase de destrucción): beforeDestroy, destruido
14. Cuénteme en detalle sobre su comprensión del ciclo de vida de vue.
Respuesta: Hay ocho etapas: antes y después de la creación, antes y después del montaje, antes y después de la actualización, antes y después de la destrucción, antes y después de la destrucción.Antes y después de la creación: antes de la creación, el el y los datos
de la instancia de vue no están definidos y no inicializado. En la fase de creación, los datos tienen datos pero aún no los tiene.
Antes/después del montaje: antes del montaje, se inicializan el y los datos de la instancia de vue, pero aún es el nodo virtual dom antes del montaje, y data.message no se ha reemplazado. En la fase de montaje, la instancia se monta y el mensaje de datos se procesa con éxito
Antes/después de la actualización: cuando los datos cambian, estos dos métodos se activarán
Destruir/antes y después: después de ejecutar el método de destrucción, el cambio a los datos no se activarán nuevamente Función periódica, lo que indica que la instancia de vue ha liberado el monitoreo de eventos y el enlace con dom en este momento, pero la estructura dom aún existe.
15. ¿Cuáles son las ventajas y desventajas de las aplicaciones de una sola página?
Respuesta:
Ventajas:
1. Buena experiencia de usuario, alta velocidad, no es necesario actualizar toda la página para cambios de contenido, menos presión sobre el servidor
2. Desarrollo front-end y back-end separados
3. El efecto de la página es más genial (esto hará que el padre de la Parte A esté más satisfecho)
Desventajas:
1. No es propicio para el SEO
2. La navegación no está disponible, debe darse cuenta hacia adelante y hacia atrás por sí mismo
3. La carga inicial consume mucho y es lenta
4. La página es relativamente complicada
16. Método de salto de enrutamiento
Respuesta:
<router-link to="home"> La etiqueta del enlace del enrutador se representará como la etiqueta <a>, que es la misma para los saltos en tamplate; la otra es navegación,
y también es para saltar a través de js, como router.push("home")
pd:
js jump es el tipo más utilizado en el proyecto, pero debe prestar atención si necesita pasar parámetros al saltar a la ruta, trate de no hacerlo combine los parámetros pasados detrás de la url! !
17. La diferencia entre $router y $route
Respuesta:
el enrutador se usa para comenzar a saltar rutas
y la ruta se usa cuando se conectan parámetros
18. ¿Qué tipos de ganchos de navegación tiene vue-router?
Respuesta:
1. Gancho global
2. Exclusivo de una sola ruta
3. Componentes
19. ¿Entiendes vuex?
Respuesta: vuex es un tipo de gestión de estado, que almacena de forma centralizada el estado de todos los componentes y puede considerarse como un almacén global
Vuex tiene cinco atributos: módulo de acción de mutación de obtención de estado
20. ¿Qué es el marco MVVM?
Respuesta: M significa modelo de datos modelo, V significa vista vista, VM significa combinación de modelo de datos y vista
21. ¿En qué ciclo de vida se colocan generalmente las solicitudes de interfaz?
Respuesta: Las solicitudes de interfaz generalmente se colocan en montado, pero debe tenerse en cuenta que montado no es compatible cuando se procesa en el lado del servidor, y debe colocarse en creado
22. Describa brevemente el proceso del algoritmo diff
Respuesta: Ejecutar el algoritmo diff es llamar a la función patch para comparar los nodos antiguo y nuevo, y luego parchear continuamente el DOM real. La función patch recibe dos parámetros, vnode y oldVnode, que representan el nuevo nodo y el antiguo nodo respectivamente. En este momento, se usa sameVnode(oldVnode, vnode). Si devuelve verdadero, ejecute patchVnode. Si devuelve falso, reemplace vnode con oldVnode y reemplace el nuevo nodo con el antiguo.
23. ¿Por qué vue es un renderizado asíncrono?
Respuesta: Si no se utiliza la actualización asíncrona, el componente actual se volverá a representar cada vez que se actualicen los datos. Teniendo en cuenta los problemas de rendimiento, Vue actualizará la vista de forma asíncrona después de la ronda actual de actualización de datos.
24. Algunos usos de instrucciones de vue
Respuesta:
v-html html
v-text elemento muestra contenido
v-bind: datos vincula datos dinámicos datos
v-on: clic vincula evento @ clic
v-for representa la lista y genera de acuerdo con el ciclo de datos La estructura de la etiqueta donde
v-if y v-show se usan para ocultar y mostrar
el enlace de datos bidireccional v-model se usa para formularios
25. ¿Pasar valores entre los componentes de nivel de página de vue?
Respuesta:
1. Usar vue-router para salto de página y pasar parámetros
2. Usar localstorge local
3. Usar gestión de datos vuex para pasar valores
26. ¿Qué métodos de matriz en vue pueden modificar directamente la matriz para actualizar la vista?
Respuesta:
push() agrega elementos a la colección y devuelve la nueva longitud
pop() elimina el último elemento de la colección y devuelve el
cambio de valor de este elemento ( ) elimina el primer elemento de la colección y devuelve el valor de ese elemento
unshift() agrega uno o más elementos al comienzo de la colección y devuelve la nueva longitud
splice() elimina o reemplaza elementos existentes o los agrega en su lugar Se utilizan nuevos elementos para modificar la matriz, y el contenido modificado se devuelve en forma de matriz.
sort() se usa para ordenar, y el valor predeterminado es ordenar de acuerdo con el bit Unicode de cada carácter.
reverse() ordena la matriz original al revés orden
27. ¿Por qué hacer la primera optimización de pantalla? ¿Cómo hacer?
Respuesta: La velocidad y la lentitud del tiempo de la primera pantalla afectan directamente el conocimiento del sitio web por parte del usuario. Por lo tanto, la duración del tiempo de la primera pantalla es particularmente importante para la duración del tiempo de retención del usuario y la tasa de conversión del usuario.
css modular loading, el css debajo del módulo correspondiente se entrega a js o jsonp solicita volver a
js para una ejecución diferida, y solo cuando hay interacción,
las imágenes se ejecutan en un modo de carga diferida en otras pantallas (no en la primera pantalla ), que no solo puede ahorrar tráfico, sino también reducir el número de solicitudes o el número de solicitudes retrasadas.
En el lado del servidor:
(1) Los nombres de dominio de una pequeña cantidad de archivos estáticos, imágenes y fuentes de íconos se colocan bajo el mismo dominio para reducir los eventos de resolución de DNS, y es mejor lograr la convergencia de nombres de dominio.
(2) Soporte para interfaces modulares.
(3) Es mejor hacer un almacenamiento en caché estático para el contenido de la primera pantalla
(4) Hacer ssr para vue y reaccionar
28. Modificadores comúnmente utilizados en vue
Respuesta:
.stop: llame a event.stopPropagation() para deshabilitar el burbujeo de eventos
prevent: llame a event.preventDefault() para evitar el comportamiento predeterminado de los eventos
capture: se usa al agregar detectores de eventos capture mode.self
—— activa la devolución de llamada solo cuando el evento se activa desde el propio elemento al que está vinculado el oyente. nativo
—— escucha el evento nativo del elemento raíz del componente. una vez
—— activa la devolución de llamada solo una vez. número
—— ingrese la cadena Convertir a números. recortar
- espacios de filtro
29. ¿V-on puede monitorear múltiples métodos?
Respuesta: v-on puede escuchar varios métodos, pero el proyecto vue-cli informará un error para el método del mismo tipo de evento.
30. Cómo resolver el problema de parpadeo de la página
Respuesta: Use v-cloak
31. Describa el proceso de renderizado y actualización de componentes
Respuesta:
El proceso de renderizado inicial de los componentes de vue:
analice la plantilla como una función de renderizado para
desencadenar una respuesta, monitoree el getter y setter del atributo de datos
para ejecutar la función de renderizado, genere vnode, parche (elem, vnode)
proceso de actualización del componente vue:
Modificar datos, desencadenar setter (previamente monitoreado en getter)
para volver a ejecutar la función de renderizado, generar newVnode, patch (vnode, newVnode)
32. ¿Qué son los Mixins?
Respuesta: Extraiga la lógica común o la configuración del componente. Cuando sea necesario utilizar un componente, simplemente mezcle la parte extraída con el componente. Esto no solo puede reducir la redundancia de código, sino también facilitar el mantenimiento posterior.
Lo que debe tenerse en cuenta aquí es que lo que se extrae es lógica o configuración, no código HTML ni código CSS. De hecho, también puede cambiar de opinión. Mixin es un componente en un componente. La creación de componentes Vue hace que nuestro código sea más reutilizable. Luego hay partes duplicadas entre los componentes. Usamos Mixin para extraerlo nuevamente.
33. ¿Cuál es la diferencia entre Mixin y Vuex?
Respuesta:
Administración del estado público de Vuex, si ciertos datos en Vuex se cambian en un componente, todos los demás componentes que hacen referencia a los datos en Vuex también cambiarán en consecuencia.
Los datos y métodos en Mixin son independientes y los componentes no se afectan entre sí después de su uso.