Finalización de las preguntas de la entrevista de Vue

Uno, ¿la comprensión de mvvm?

mvvm es la abreviatura de Model-View-ViewModel

El modelo representa el modelo de datos y la lógica empresarial de la modificación y el funcionamiento de los datos también se puede definir en el modelo.

La vista representa la capa de vista, que representa los componentes de la interfaz de usuario, es decir, la parte de la página web que se presenta al usuario. Las partes codificadas de la página web no se actualizarán dinámicamente con datos y algunas se actualizarán en función de los datos. Los datos actualizados se obtienen de la capa del modelo. Es responsable de transformar el modelo de datos en una pantalla de interfaz de usuario.

ViewModel monitorea los cambios en los datos del modelo y controla el comportamiento de la vista, y maneja la interacción del usuario. Una comprensión simple es un objeto que sincroniza Vista y Modelo, conectando Modelo y Vista.

Bajo la arquitectura MVVM, no existe una conexión directa entre la Vista y el Modelo, sino a través del ViewModel para interactuar. La interacción entre el Modelo y el ViewModel es bidireccional, por lo que los cambios en los datos de la Vista se sincronizarán con el Modelo , y los cambios en los datos del modelo también se reflejarán en la vista inmediatamente.

ViewModel vincula la capa de vista y la capa de modelo a través de un enlace de datos bidireccional, y la sincronización entre la vista y el modelo es completamente automática, y no hay necesidad de pensar en interferencias. Por lo tanto, los desarrolladores solo deben prestar atención a la lógica empresarial y no necesidad de manipular manualmente el DOM. Preocupado por la sincronización del estado de los datos, MVVM gestiona completamente el mantenimiento del estado de los datos complejos.

En segundo lugar, el ciclo de vida de Vue

beforeCreate : antes de que no haya comenzado el tiempo de observación e inicialización de datos

Después de crear : observación de datos completa, cálculos de atributos y métodos, inicializar eventos, el atributo $ el está fuera sin Shina

beforeMount : se llama antes de que comience el montaje, y la función de renderización relacionada se llama por primera vez. El ejemplo ha completado la siguiente configuración: compile la plantilla y genere HTML a partir de los datos y la plantilla en los datos. Tenga en cuenta que el HTML aún no se ha montado en la página en este momento.

Después de montar cargado: se llama después de que el se reemplaza por el .vm. $ El creado y se monta en la instancia. El ejemplo ha completado la siguiente configuración: reemplace el objeto DOM apuntado por el atributo el con el contenido html compilado anteriormente. Termine de renderizar el html en la plantilla a la página html. La interacción Ajax se lleva a cabo en este proceso.

beforeUpdate : se llama antes de que se actualicen los datos, lo que ocurre antes de que el DOM virtual se vuelva a procesar y se aplique un parche. El estado se puede cambiar aún más en este enlace sin desencadenar un proceso de reproducción adicional.

actualizado : se llama después de que el DOM se vuelve a renderizar y se parchea debido a cambios en los datos. Cuando se llama, el componente DOM se ha actualizado, por lo que se pueden realizar operaciones que dependen del DOM. Sin embargo, en la mayoría de los casos, debe evitar actualizar el estado durante este período, ya que esto puede causar un ciclo interminable de actualizaciones. Este perro no se llama durante la renderización del lado del servidor.

beforeDestroy : se llama antes de que se destruya la instancia. La instancia todavía está completamente disponible.

Después de la destrucción : se llama después de que se destruye la instancia. Después de la llamada, se eliminarán todos los detectores de eventos y se destruirán todas las instancias secundarias. Este perro no se llama durante la renderización del lado del servidor.

1. ¿Qué es el ciclo de vida?

El proceso desde el montaje hasta la destrucción de una instancia de Vue es el ciclo de vida. Cree desde el principio, inicialice datos, compile plantillas, monte DOM-render, actualice-render. Una serie de procesos como la destrucción se denominan ciclo de vida de Vue

2. ¿Cuál es el papel del ciclo de vida de Vue?

Hay múltiples eventos enganchados en su ciclo de vida, lo que nos facilita formar una buena lógica al controlar el proceso de toda la instancia de Vue.

3. Hay varias etapas en el ciclo de vida de Vue

Ocho etapas antes y después de la creación, antes y después de la carga, antes y después de la actualización, antes y después de la destrucción

4. ¿Qué enlaces se activarán en la primera carga de la página?

beforeCreate, creado, beforeMount, montado

5. En qué ciclo se completó la renderización DOM

La representación DOM se ha completado en montada

Three Vue se da cuenta del principio de enlace de datos bidireccional: Object.defineProperty ()

Vue implementa principalmente el enlace de datos bidireccional: utiliza el secuestro de datos combinado con el modelo de publicador-suscriptor para secuestrar al establecedor y al captador de cada propiedad, publicar mensajes a los suscriptores cuando cambian los datos y activar la devolución de llamada del oyente correspondiente. Al pasar un objeto Javascript normal a una instancia de Vue como su opción de datos, Vue recorrerá sus propiedades y usará Object.defineProperty para convertirlas en getter / setter. Los usuarios no pueden ver captadores / definidores, pero internamente permiten que Vue rastree las dependencias y notifique los cambios cuando se accede a las propiedades y se modifican.

El enlace de datos bidireccional de Vue usa MVVM como el punto de entrada para el enlace de datos, integrando Observer, Compile y Watcher, a través de Observer para monitorear los cambios de datos de su propio modelo, y Compile para analizar las instrucciones de la plantilla de compilación (in vue se usa para analizar { {}}), finalmente use el observador para construir un puente de comunicación entre el observador y el Compilar para lograr el cambio de datos—> ver actualización; ver cambio de interacción (entrada) -> cambio de modelo de datos efecto de enlace bidireccional.

cuatro. Transferencia de parámetros entre componentes de Vue.

1. La transferencia mutua de valores entre componentes padre e hijo

El componente padre se pasa al componente hijo: el componente hijo recibe datos a través del método props;

El componente hijo se pasa al componente padre: el método $ emit pasa parámetros

2. Los componentes hermanos pasan por valor.

eventBus consiste en crear un centro de eventos, que equivale a una estación de tránsito, que se puede utilizar para transmitir y recibir eventos, es adecuado cuando el proyecto es relativamente pequeño.

5. Implementación de enrutamiento de Vue, modo hash y modo histórico

El modo hash en el símbolo del navegador "#", # y los caracteres después de # se denominan hash, se leen con window.location.hash;

Características: Aunque el hash está en la URL, no está incluido en la solicitud HTTP, se usa para guiar las acciones del navegador y es inútil para la seguridad del lado del servidor. El hash no recargará la página.

En el modo hash, solo el contenido antes del símbolo hash se incluirá en la solicitud. Por ejemplo, para el backend, incluso si el enrutamiento no está completamente cubierto, no devolverá un error 404.

Modo de historial: el historial adopta las nuevas características de HTML5; y proporciona dos métodos nuevos: pushState (), replaceState () puede modificar la pila del historial del navegador y el evento popState escucha los cambios de estado. En el modo de historial, la URL de front-end debe ser coherente con la solicitud real a la URL de back-end, como: http://www.xxx.com/items/id. Si el backend carece de procesamiento de enrutamiento para / items / id, devolverá un error 404. El sitio web oficial de Vue-Router lo describe de la siguiente manera: "Sin embargo, este modo debe jugarse bien y requiere soporte de configuración de back-end ... Por lo tanto, debe agregar un recurso candidato que cubra todas las situaciones en el servidor: si el La URL no coincide con ningún recurso estático. Debería devolver la misma página index.html, que es la página de la que depende la aplicación ".

6. ¿Cuál es la diferencia entre Vue, Angular y React?

1. Diferencia con AngularJS

Similitudes: Ambos admiten comandos: comandos integrados y comandos personalizados; ambos admiten filtros: filtros integrados y filtros personalizados; ambos admiten enlace de datos bidireccional; ninguno admite navegadores de gama baja.

Diferencias: AngularJS tiene un alto costo de aprendizaje, como la adición de la función de inyección de dependencia, mientras que la API proporcionada por Vue.js en sí es relativamente simple e intuitiva; en términos de rendimiento, AngularJS se basa en una verificación sucia de datos, por lo que más Observadores, los más lentos; Vue .js usa la observación basada en el seguimiento de dependencias y usa la actualización de cola asíncrona, todos los datos se activan de forma independiente.

2. La diferencia con React

Mismo punto:

React utiliza una sintaxis JSX especial. Vue.js también promueve la escritura de formatos de archivo especiales .vue en el desarrollo de componentes. Hay algunas convenciones sobre el contenido del archivo, y ambos deben compilarse y usarse; la idea central es la misma: todo es un componente, una instancia de componente Se pueden anidar; ambos proporcionan funciones de enlace razonables para permitir a los desarrolladores personalizar sus necesidades; no tienen funciones como AJAX y Route integradas en el paquete central, pero se cargan como complementos; en el desarrollo de componentes Ambos admiten las características de mixins.

Diferencias: El DOM virtual utilizado por React realizará comprobaciones sucias en los resultados renderizados; Vue.js proporciona instrucciones, filtros, etc. en la plantilla, que pueden operar el DOM virtual de manera muy conveniente y rápida.

Seven. Función de gancho del enrutamiento Vue

La página de inicio puede controlar el salto de navegación, beforeEach, afterEach, etc., que generalmente se utilizan para modificar el título de la página. Algunos requieren iniciar sesión para ajustar la función de redireccionamiento de la página.

beforeEach tiene principalmente tres parámetros para desde, siguiente

to: El objeto de enrutamiento de destino en el que ingresará la ruta.

de: ruta la navegación actual está a punto de salir

siguiente: La función debe llamar al método El efecto del gancho de resolución depende de los parámetros de llamada del método siguiente. Puede controlar el salto de las páginas web.

8. ¿Qué es Vuex? ¿cómo utilizar? ¿Qué escenarios funcionales lo utilizan?

Vuex es un conjunto de herramientas de administración de estado para aplicaciones Vue.js. Utiliza un modo de administración centralizada para administrar el estado de todos los componentes de la aplicación.

Escenarios de aplicación: reproducción de música, estado de inicio de sesión, agregar al carrito de compras

Los atributos centrales de la tienda en Vuex

vuex的State特性
A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data
B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

vuex的Getter特性
A、getters 可以对State进行计算操作，它就是Store的计算属性
B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
C、 如果一个状态只在一个组件内使用，是可以不用getters

vuex的Mutation特性
改变store中state状态的唯一方法就是提交mutation，就很类似事件。
每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。
我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；
Action 可以包含任意异步操作，Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，
因此你可以调用 context.commit 提交一个 mutation，
或者通过 context.state 和 context.getters 来获取 state 和 getters。
Action 通过 store.dispatch 方法触发：eg。
store.dispatch('increment')

vuex的module特性
Module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，
每个模块中拥有自己的state、mutation、action和getter

nueve. Comprensión de Keep-Alive

Keep-alive es un componente integrado de Vue, que puede mantener el estado de los componentes contenidos o evitar la re-renderización.

Después de Vue 2.1.0, keep-alive ha agregado dos nuevos atributos, incluir (caché de componentes incluidos) y excluir (los componentes excluidos no se almacenan en caché, la prioridad es mayor que incluir).

Explicación de parámetros:

include-string o expresión regular, solo se almacenarán en caché los componentes con nombres coincidentes

exclude-string o expresión regular, los componentes con nombres coincidentes no se almacenarán en caché

Los atributos de inclusión y exclusión permiten que el componente se almacene en caché de forma condicional. Ambos pueden usar "," para separar cadenas, expresiones regulares y matrices. Cuando use regular o array, recuerde usar v-bind

diez. Entrevista de una frase

CSS solo funciona en el componente actual.

Escribir con alcance en la etiqueta de estilo

La diferencia entre v-if y v-show

v-if representa los elementos DOM de acuerdo con las condiciones, v-show diez bloques de visualización o ninguno

La diferencia entre $r$ $o$ $u$ $t$ $e$ $y$ enrutador

$ route Diez objetos de información de enrutamiento incluyen ruta, parámetros, hash, query fullPath nombre coincidente y otros parámetros de información de enrutamiento,

$ enrutador diez ejemplos de enrutamiento, el objeto incluye métodos de salto de enrutamiento, funciones de enlace

¿Cuáles son los dos núcleos de vue.js?

Sistema de componentes basado en datos.

Instrucciones comunes de Vue

v-for v-if v-bind v-on v-show v-else

¿Qué modificadores se usan comúnmente en vue?

.prevent no volverá a cargar la página después de enviar el evento; .stop evita que el evento se propague. self: se activa cuando el evento ocurre en el elemento mismo en lugar de en un elemento secundario; .capture: el detector de eventos, puede elegir el orden de burbujeante

v-on puede vincular varios métodos

¿Cuál es el papel del valor clave en vue?

Cuando Vue.js usa v-for para actualizar la lista de elementos renderizados, utiliza de forma predeterminada la "estrategia de reutilización in situ. Si se cambia el orden de los elementos de datos, Vue no moverá los elementos DOM para que coincidan con el orden de los elementos de datos. En su lugar, simplemente tome cada elemento aquí y asegúrese de que muestra cada elemento que se ha renderizado bajo un índice específico. La clave es principalmente actualizar el DOM virtual de manera eficiente.

¿Cuáles son las propiedades calculadas de vue

Respuesta: Poner demasiada lógica en la plantilla hará que la plantilla sea demasiado pesada y difícil de mantener. Cuando los datos deben procesarse de manera compleja y pueden usarse varias veces, intente usar el método de cálculo de atributos. Beneficios: ①Hacer que la estructura de procesamiento de datos sea clara; ②Depende de los datos, actualice los datos y actualice automáticamente los resultados del procesamiento; ③El esto interno del atributo calculado apunta a la instancia de vm; ④Cuando llama a la plantilla, puede escribir directamente el nombre del atributo calculado; ⑤Los getters se usan comúnmente Método, para obtener datos, también puede usar el método establecido para cambiar los datos; ⑥Comparado con los métodos, sin importar los cambios de datos dependientes, los métodos se volverán a calcular, pero cuando los datos dependientes no cambien , computed lo obtendrá de la caché y no se volverá a calcular.

Aplicaciones de una sola página como vue y sus ventajas y desventajas

Ventajas: el objetivo de Vue es implementar el enlace de datos receptivo y los componentes de vista combinados a través de la API más simple posible. El núcleo es un sistema de enlace de datos receptivo, MVVM, basado en datos, en componentes, liviano, breve introducción, eficiente, rápido y amigable con los módulos

Desventajas: no es compatible con navegadores de versión baja, al menos solo es compatible con IE9, lo que no favorece la optimización de SEO (si desea admitir SEO, se recomienda utilizar componentes de renderizado del lado del servidor). La página es relativamente larga; es imposible utilizar el navegador Los botones de navegación deben avanzar y retroceder por sí mismos.

¿Cómo definir el enrutamiento dinámico de vue-router? Cómo obtener el valor pasado

En el archivo index.js en el directorio del enrutador, agregue: / id al atributo de ruta para obtenerlo usando params.id en el enrutador

Método de salto de once rutas

1. La etiqueta de enlace del enrutador se representará como una etiqueta, o saltará a través de js como enrutador.push

12. ¿Cuál es la diferencia entre Computed y watch?

calculado

Calculado es un atributo calculado, es decir, un valor calculado. Se usa más en escenarios donde se calcula el valor

El valor calculado se puede almacenar en caché. El valor calculado se almacenará en caché después de que se ejecute el getter. Sólo lo calcula el getter que se llama de nuevo cuando el valor calculado se obtiene la próxima vez que el valor del atributo depende de los cambios.

Computed es adecuado para escenarios informáticos que consumen más rendimiento.

reloj

Watch es más una función de observación, similar a la devolución de llamada de monitoreo de algunos datos, utilizada para observar el valor de props $ emit o este componente, y ejecutar la devolución de llamada para operaciones posteriores cuando los datos cambian

Sin línea de caché, el valor no cambiará cuando se vuelva a renderizar la página

Como escoger:

Cuando queremos realizar cálculos numéricos y confiar en otros datos, diseñe estos datos como se calcularon.

Si necesita hacer algo cuando ciertos datos cambian, use el reloj para observar el cambio de datos.

13. El papel de los atributos de ámbito en los componentes de Vue

Indica que el estilo solo se puede aplicar al módulo actual, que logra bien el propósito de privatización del estilo

Pero debe usarse con precaución, el estilo no es fácil de modificar y, en muchos casos, necesitamos ajustar el estilo de los componentes públicos.

Solución

①: Use estilos CSS mixtos: (mezcle los estilos globales y locales)

Quince: La comprensión del marco progresivo: promover al menos no hacer más que responsabilidades

La menor afirmación significa que los requisitos para los usuarios son relativamente bajos y no hay más trabajo fuera de sus funciones. ¿Es equivalente a escribir el código de acuerdo a sus necesidades, sin tener que manipular demasiado otras cosas además del código?
De abajo hacia arriba: de acuerdo con el significado literal, primero escriba la capa inferior y luego escriba capa por capa, como si estuviera construyendo un edificio, coloque los cimientos y luego comience a construir el edificio hacia arriba. Vue es el mismo desde abajo Renderizar, escribir.

Dieciséis: ¿Puede v-on monitorear varios métodos?

pueden

Dos formas de escribir un elemento vinculado a múltiples eventos, dos formas de escribir un evento vinculado a múltiples funciones y el uso de modificadores.

<a style="cursor:default" v-on='{click:DoSomething,mouseleave:MouseLeave}'>doSomething</a>

Diecisiete: ¿Por qué los datos en el componente vue deben ser una función?

El valor de los datos en un componente vue no puede ser un objeto, porque el objeto es un tipo de referencia y el componente puede ser referenciado por varias instancias al mismo tiempo. Si el valor de los datos es un objeto, hará que varias instancias compartan un objeto. Si un componente cambia el valor del atributo de datos, otras instancias también se verán afectadas.

Dieciocho: el principio de compilación de webpack

El papel del paquete web:

Gestión de dependencias: es conveniente hacer referencia a módulos de terceros, facilitando la reutilización de módulos, evitando conflictos causados por inyección global y evitando la carga repetida de módulos innecesarios. Lee los módulos dependientes capa por capa, agrega diferentes entradas y no empaqueta repetidamente los módulos dependientes.

Código combinado: empaquete de forma centralizada varios módulos dispersos en archivos grandes para reducir la cantidad de conexiones de solicitud http y coopere con UglifyJS

** Resumen de una oración: ** La función del paquete web es manejar dependencias, modularizar, empaquetar archivos comprimidos y administrar complementos.
Todo es un módulo. Dado que el paquete web solo admite archivos js, debe convertirse en un módulo compatible con el paquete web con cargador. El complemento se utiliza para expandir las funciones del paquete web. Durante el proceso del ciclo de vida de construcción del paquete web, haga lo correcto en el momento adecuado.

¿Cómo funciona el paquete web?

①Analice los parámetros de configuración, combine la información de configuración del shell (comando npm install similar) y el archivo webpack.config.js, y
genere la información de configuración final; ②Registre el complemento en la configuración, deje que el complemento escuche el nodo de evento en el ciclo de vida de la compilación del paquete web, haga la respuesta correspondiente;
③Analice el archivo de entrada en el archivo de configuración y descubra los archivos de los que depende cada archivo, y
repita ; ④En el proceso de recuperar cada archivo, busque el tipo de archivo y loader en el archivo de configuración
Genera el cargador correspondiente para convertir el archivo; ⑤Después de la recursividad, se obtiene el resultado final de cada archivo, y el fragmento de código (el nombre después del empaque) se genera de acuerdo con la configuración de entrada;
⑥Todos los fragmentos se generan al sistema de archivos.

Diecinueve procesos completos de análisis de navegación de vue-router

1. Se activa la navegación;
2. Llamar al guardia beforeRouteLeave en el componente desactivado;
3. Llamar al guardia beforeEach global;
4. Llamar al guardia beforeRouteUpdate en el componente de reutilización;
5. Llamar al guardia beforeEnter en la configuración de enrutamiento;
6. Analizar componente de enrutamiento asincrónico;
7. Llamar a beforeRouteEnter guard en el componente activado;
8. Llamar a beforeRouteEnter global;
9. Se confirma la navegación;
10 ... Llamar al gancho global afterEach;
11. Actualización DOM;
12. Llamar a beforeRouteEnter con el instancia La función de devolución de llamada pasó al siguiente en la guardia.

Veinte: la diferencia entre parámetros y consulta

Uso: la consulta debe importarse con la ruta, los parámetros deben importarse con el nombre, los parámetros aceptados son similares, respectivamente

esta. $r o u t e . q u e r y, n a m e y t h i s .$ route.params.name

Dirección URL: la consulta es similar a obtener, los parámetros son similares a la publicación, el primero no se perderá después de la actualización, el segundo se perderá

Método para activar la actualización de la vista cuando Vue actualiza la matriz

push () pop () shift () unshift () empalmar () ordenar () invertir ()

Acumulación de preguntas de la entrevista de Vue