La cuarta ronda de búsqueda de empleo: experiencia presencial Vue

1. Ciclo de vida de Vue

1. Definición de ciclo de vida: el proceso desde la creación hasta la destrucción de una instancia de Vue es el ciclo de vida. Es decir, una serie de procesos desde el inicio de la creación, inicialización de datos, compilación de plantillas, montaje de Dom→renderizado, actualización→renderizado, descarga, etc. A esto lo llamamos el ciclo de vida de Vue.

2. Detalles:

antes de crear:

对应的钩子函数为beforeCreate。此阶段el和data都还没有形成。

creado:

在这个阶段vue实例已经创建，仍然不能获取DOM元素。

created可以获取到props、data中定义的值。但是el还没有形成。所以也没有渲染DOM。

antes del montaje:

但是el和data都已经存在了，只是还未挂载。页面呈现的是未经编译的DOM结构，所有对DOM的操作，都不奏效。

montado:

mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。

此时，页面中呈现的是Vue编译后的DOM，对DOM的操作有效，但是要避免对DOM的操作。至此初始化结束。我们可以在这个阶段，开启定时器、发送网络请求、订阅消息、绑定自定义事件等。

antes de la actualización:

当数据发送改变，页面尚未和数据保持同步。数据新，页面旧。

actualizado:

数据是新的，页面也是新的，页面和数据保持同步。

antes de destruir:

销毁前，关闭定时器，取消订阅消息，解绑自定义事件等收尾操作。

destruido:

销毁了。

销毁后借助Vue开发者工具无法看到任何信息；
自定义事件失效；
一般不会再操作注册，即使操作数据，也不会再触发更新流程。

3.Ciclo de vida común:
montado: enviar solicitud Ajax; iniciar temporizador; enlazar evento personalizado; suscribir mensaje, etc.;
beforeDestroy: borrar temporizador; desvincular evento personalizado; cancelar suscripción de mensaje, etc.;

Cabe señalar que si hay subcomponentes en un componente, los subcomponentes se montan antes de que se monte el componente principal, se actualizan antes de que se actualice el componente principal y se destruyen antes de que se destruya el componente principal.

4. Cuando la página se carga por primera vez,
activa beforeCreate, Created, beforeMount, Mounted

5. $nextTick: Opera el DOM inmediatamente después de actualizar los datos.

2. Principio de respuesta

La clave del principio de respuesta de Vue2 es Object.defineProperty, que redefine las propiedades de los datos y establece una función de intercepción para obtener y establecer datos. Cuando se actualice el configurador, se notificará a las dependencias correspondientes para actualizar la vista. Para lograr la capacidad de respuesta.

El principio receptivo de Vue3 usa todas las propiedades en el objeto proxy del objeto Proxy.

3. Caché de enrutamiento

El almacenamiento en caché de rutas se puede mejorar para mejorar la eficiencia de la aplicación.

Método de caché: etiqueta de supervivencia.

Colocar la vista del enrutador dentro de la etiqueta permite el almacenamiento en caché de datos simple.

    <keep-alive>
        <router-view></router-view>
    </keep-alive>

Cabe señalar que keep-alive tiene un atributo de inclusión, que se puede utilizar para almacenar en caché los datos de componentes individuales. incluir seguido deNombre del componente, si es de varios componentes, va seguido de una matriz de nombres de componentes.

También se debe tener en cuenta que la función de ciclo de vida del componente de enrutamiento tiene un activado y un desactivado. A través de estas dos funciones de ciclo de vida, podemos implementar las funciones de ciclo de vida de dos componentes principales clave: activar el temporizador cuando aparece el componente de mensajes y destruir el temporizador cuando se corta el componente de mensajes.

4. El papel de la clave en DOM virtual

La clave es el identificador de objeto del DOM virtual. Cuando los datos en el estado cambien, Vue generará un nuevo DOM virtual de acuerdo con los nuevos datos; luego, Vue comparará el nuevo DOM virtual con el antiguo DOM virtual:

La misma clave que el nuevo DOM virtual se encuentra en el antiguo DOM virtual. Si el contenido del DOM virtual no ha cambiado, el DOM real se usará directamente; si el contenido del DOM virtual ha cambiado, se creará un nuevo DOM virtual. se generará, y luego se reemplazará el DOM anterior en la página.

Cuándo elegir una clave:
es mejor usar el identificador único de cada dato como clave; no hay ninguna operación que destruya el orden, solo se usa para mostrar la lista y se puede usar el índice.

5. algoritmo de comparación de diferencias

En teoría, la capacidad de respuesta de Vue, si los datos cambian, la plantilla se volverá a procesar. Para mejorar el rendimiento de la aplicación, en algunos casos no es necesario renderizar completamente el DOM. Esto es inseparable del algoritmo diff.

La situación actual corresponde a un DOM virtual, una vez actualizados los datos se generará un nuevo DOM virtual. Usando la clave como el identificador de objeto del DOM virtual, los dos DOM virtuales se comparan y sus nodos se extraen de los nodos de los nodos para la comparación, lo que es equivalente al algoritmo transversal primero en profundidad del gráfico. Comparación uno a uno, si falta el DOM virtual anterior, se agregará, y si el DOM virtual anterior es demasiado grande, se eliminará.

Completando los pasos anteriores y luego renderizando sobre la base anterior, la velocidad es más rápida y el rendimiento es mejor.

6. MVVM y MVC

MVVM, modelo-vista-modelo de vista. Modelo-Vista-VistaModelo.

M y V están conectados a través del puente de VM, realizando la separación de modelo y vista. Y la comunicación entre los MV usa enlace bidireccional, V->M usa monitoreo de eventos Dom; M->V usa enlace unidireccional de datos.

MVC es comunicación unidireccional, V->M debe usar el controlador para lograr la comunicación.

La mayor diferencia entre los dos es que MVVM realiza la sincronización de datos. No es necesario cambiar manualmente los elementos DOM, los elementos DOM se sincronizan automáticamente.

7. ¿Por qué elegir el desarrollo de Vue?

Fácil de usar, documentación y tutoriales maduros, rápidos de aprender;

Hay muchas bibliotecas de componentes, estilos ricos y buenos efectos;

Los proyectos de construcción de andamios son muy convenientes;

La reutilización de los componentes es fuerte; el rendimiento es bueno; la operación es rápida.

8. Pasar valores entre componentes

Los componentes padre-hijo pasan valores, el componente padre usa el enlace unidireccional de datos y la declaración de props del componente hijo acepta; el componente nieto
pasa valores, el componente antepasado usa provide para proporcionar datos y el componente nieto usa inject para recibir datos.

Valor de paso del componente secundario-principal, evento personalizado, establezca un evento personalizado para el componente secundario en el componente principal, el componente secundario usa emit para desencadenar el evento personalizado y pasa los datos al componente principal; el componente secundario también puede usar ref para pase el valor al
componente principal, establezca una referencia al componente secundario en el componente principal y vincule un evento personalizado al componente secundario a través de $refs, active el componente secundario y el componente principal también puede recibir el valor del componente secundario componente.

El coche de eventos, $bus, puede compartir componentes de esta manera. El principio es poner el coche de eventos en el prototipo de Vue, y todos los componentes pueden acceder a él; Vuex también puede realizar la transferencia de valor
entre componentes hermanos.

9. Definición de componentes

Primero defina un archivo vue en la carpeta Componentes;

Introducir y nombrar globalmente o en un solo componente;

Aplique el nombre anterior como nombre de etiqueta al componente.

10. Uso de complementos

El uso del complemento es descargar el complemento a través de npm primero;

Luego use Vue.use() en main.js

11. Uso de scss

Scaffolding puede instalar automáticamente scss.

Después de la instalación, marque scss detrás de la etiqueta de estilo y utilícelo. Lo mismo vale para menos.

12. Hable sobre la pantalla de esqueleto de Vue

La función de la pantalla esqueleto es optimizar la experiencia del usuario en redes débiles. Cuando la red del usuario es pobre, haga clic en para mostrar el esqueleto de una página.

Método 1, en el archivo de plantilla, donde la identificación es la aplicación, escriba el efecto html deseado;

La pantalla de esqueleto se puede renderizar automáticamente a través de un complemento.

13. Los estilos de cada componente no se afectan entre sí

Simplemente agregue el atributo de alcance.

14.v-si 和v-mostrar

Les siguen declaraciones de juicio condicional.

Sin embargo, sus principios de manipulación para ocultar y mostrar elementos son diferentes. v-show muestra y oculta elementos a través de la visualización; v-if destruye o reconstruye elementos directamente.

15. ¿Por qué no se puede usar v-if junto con v-for?

Estas dos prioridades son diferentes en vue2 y vue3, lo cual es fácil de confundir. Así que presta atención al usarlo.

16. Revisión relevante de Vuex

1. ¿Qué es vuex?
Gestión de estado y uso compartido de datos en vue.

2. Atributos en vuex: estado, mutación, acción, getter

3. El papel de los atributos:
el estado es la ubicación de almacenamiento de la fuente de datos, correspondiente a los datos en el objeto Vue general,
los captadores pueden realizar operaciones de cálculo en el estado, que es el atributo de cálculo de la tienda,
la mutación almacena internamente la operación de sincronización en los datos, y generalmente usa $store .commit para llamar,
action almacena operaciones asíncronas en su interior, y las operaciones asíncronas se someten a mutaciones con commit para operación, generalmente llamadas con $store.dispatch;

17. Parámetros de enrutamiento

Se utiliza para:
enrutamiento dinámico,
coincidencia de nombres, paso de parámetros parme
, coincidencia de rutas, paso de parámetros de consulta;

query es más similar a obtener parámetros en ajax, y params es similar a post En pocas palabras, el primero muestra los parámetros en la barra de direcciones del navegador, mientras que el segundo no.

18.computado, reloj, métodos

métodos: se utiliza principalmente para escribir la lógica empresarial, que es una operación específica. es una llamada de función;

computado: el método definido por computado se llama en forma de acceso de atributo, y el resultado del atributo se almacenará en caché, a menos que cambie el atributo de respuesta dependiente, se recalculará y se utilizará principalmente como un atributo;

El principio de la memoria caché computada: el punto más importante del control de la memoria caché en la computación es que los datos sucios se marcan como sucios y sucios es un atributo del observador;

ver Un objeto, la clave es la expresión que se observará y el valor es la función de devolución de llamada correspondiente. Se utiliza principalmente para monitorear los cambios de algunos datos específicos, a fin de realizar algunas operaciones de lógica de negocios específicas. no se almacenará en caché. También podemos usar watch para realizar algunas operaciones asincrónicas.

19.siguientetick

nextTick en vue se usa principalmente para solucionar el problema de que el DOM no se ha actualizado a tiempo después de que los datos cambian dinámicamente, y nextTick se puede usar para obtener los últimos cambios de DOM después de la actualización de datos.

Retrasa la función de devolución de llamada para que se llame después de los próximos datos de actualización de dom.

20.Vue.usar()

Vue.use se usa para instalar algunos complementos. Use el complemento a través del método global Vue.use (), Vue.use evitará automáticamente múltiples registros del mismo complemento

21. Encabezados de solicitud comunes, encabezados de respuesta

Encabezado de solicitud, utilizado para describir información adicional que utilizará el servidor:

Aceptar,​​​​​​​​El campo de encabezado de la solicitud se utiliza para especificar qué tipos de información puede aceptar el cliente;

Aceptar idioma, utilizado para especificar el tipo de idioma aceptable para el cliente;

​​​​​​Host, ip de host y número de puerto;

​​​​​​​​​​Referer,​​​​​​​​Este contenido se utiliza para identificar desde qué página se envía la solicitud, el servidor puede obtener esta información y realizar el procesamiento correspondiente, como realizar estadísticas de origen , procesamiento anti-leeching, etc.

Encabezado de respuesta, utilizado para describir los datos de la respuesta:

Contenido-Idioma, afecta el idioma utilizado en el contenido.

Content-Length, la longitud del cuerpo del mensaje de respuesta.

22. Interacción entre terminales entre h5 y la aplicación

tiene su propio método.

23