Introducción al marco anterior y la entrevista del proyecto 2

Primero, veamos algunas preguntas de la entrevista

Primero mire algunas preguntas de la entrevista, piense por sí mismo, cuánto puede responder y compare las respuestas con las preguntas de la entrevista.

Pensando en cómo lidiar con estas preguntas de la entrevista y todas las entrevistas.

1. Preguntas de la entrevista de Vue

1. ¿Cuál es la diferencia entre v-sho y v-if

la diferencia:

(1) Cuando la condición es verdadera, no hay diferencia. Cuando la condición es falsa, v-if no crea elementos v-muestra los elementos de representación y luego los oculta
(2), v-if es más adecuado para el filtrado de datos y renderizado inicial, v -show es más adecuado para el cambio de elementos

2. ¿Por qué utilizar la clave en v-for?

(1) El bucle de lista en vue debe agregar: clave = "identificador único" El identificador único debe ser el id en el elemento tanto como sea posible, porque el componente vue se reutiliza mucho y la clave puede identificar la unicidad del componente , para distinguir mejor la clave de cada componente. El objetivo principal es actualizar eficientemente el DOM virtual.
(2) La clave se utiliza principalmente para el algoritmo dom diff. El algoritmo diff es una comparación del mismo nivel. Compara la clave en la etiqueta actual y su nombre de etiqueta actual. Si la clave y el nombre de la etiqueta son iguales, sólo se hace un movimiento. La operación no recrea ni borra elementos.
(3) La estrategia de "reutilización in situ" se utiliza de forma predeterminada cuando no hay una clave. Si se cambia el orden de los elementos de datos, Vue no mueve el elemento Dom para que coincida con el cambio del elemento de datos, sino que simplemente reutiliza cada elemento en la posición original. Si borras el primer elemento, cuando encuentres que la etiqueta es la misma y el valor es diferente durante la comparación, se reutilizará la posición anterior, y el nuevo valor se colocará directamente en esa posición, y así sucesivamente, el último uno se eliminará si hay una gota más.
(4) Intente no utilizar el índice del valor del índice como valor clave y asegúrese de utilizar un valor de identificación único, como id. Porque si usa el índice de índice de matriz como clave, cuando se inserta un nuevo elemento en la posición especificada en la matriz, el índice de índice se actualizará en este momento, y los valores clave correspondientes al DOM virtual subsiguiente serán todos En este momento, seguirá siendo innecesario. La actualización es como si no se hubiera agregado ninguna clave, por lo que aunque el índice puede resolver el problema de la falta de conflicto de claves, no puede resolver la situación de reutilización. Si se trata de datos estáticos, no hay problema en utilizar el índice del número de índice como valor clave.
(5) Si el nombre de la etiqueta es el mismo, la llave se reutilizará en su lugar en este momento. Si el nombre de la etiqueta es diferente, la llave no se volverá a utilizar.

3. Describe el ciclo de vida de los componentes de Vue (con componentes padre-hijo)

Cargue el proceso de renderizado
padre beforeCreate -> padre creado -> padre beforeMount -> hijo beforeCreate -> hijo creado -> hijo beforeMount -> hijo montado ->
proceso de actualización del componente hijo montado padre
parent beforeUpdate -> hijo beforeUpdate -> hijo actualizado -> padre actualizado
proceso de actualización del componente padre
padre beforeUpdate -> padre
proceso de destrucción actualizado
padre beforeDestroy -> hijo antes Destroy -> hijo destruido -> padre destruido

4. ¿Cómo se comunican los componentes de Vue?

La comunicación entre los componentes de Vue se puede dividir aproximadamente en los siguientes tipos:

1. Utilice el atributo props.

Los accesorios son utilizados principalmente por el componente principal para pasar datos al componente secundario. Puede registrar algunas características personalizadas en el componente. Cuando se pasa un valor a una propiedad de prop, se convierte en una propiedad de esa instancia de componente. Este valor se puede utilizar en el subcomponente. Tenga en cuenta: todos los accesorios forman un enlace descendente unidireccional entre los accesorios principales y secundarios, es decir, la actualización del accesorio principal fluirá hacia el componente secundario, pero lo contrario no funcionará, el componente secundario no puede cambiar el estado del componente principal.

Cada vez que se actualiza el componente principal, todos los accesorios del componente secundario se actualizarán al último valor.

Demostrado en el ejemplo de la siguiente manera:

Consulte el componente TodoList en el componente principal, use: todos (v-bind: todos) para pasar una matriz, use: deleteTodo para pasar una función,

y use props en el componente secundario para recibir los parámetros entrantes, y luego úselo en este componente. No es necesario definir en los datos. Cuando se pasa una función a un componente secundario, significa que el componente secundario necesita modificar un valor del componente principal, pero no puede modificarlo por sí mismo. Solo puede pasar un valor específico (como un subíndice de una matriz) o no pasarlo al componente principal. Componente, notificar al componente principal para actualizar la operación (por ejemplo, eliminar un elemento en la matriz).

2. Utilice eventos personalizados de Vue.

¿Cómo usarlo?

1. El componente principal puede usar v-on directamente para escuchar los eventos activados por el componente secundario donde se usa el componente secundario. Es decir, use v-on para vincular eventos personalizados en el componente principal y luego use $ emit (eventName, data) para activar el evento en el componente secundario. Úselo de la siguiente manera:
   

addTodo es una función, el contenido específico de la función ya no se muestra y el evento es activado por $ emit en el componente hijo.

Tenga en cuenta: este método solo se utiliza para la transferencia de componentes de padres e hijos, no se aplica a tres capas y superiores

2. Cada instancia de objeto de Vue implementa la interfaz de eventos, por lo que puede usar $On-(EVEn-TNAmE)supervisorpara\; escucharalgomiembro,haceruso$ emitir evento de activación.
   
   Elemento padre, cuando está montado, un detector de eventos para el subconjunto vinculante: el
   
   subconjunto emite o se activa por el evento $ .

3. Suscripción y publicación de mensajes (biblioteca PubSubJS)

   Suscríbase al mensaje PubSub.subscribe ('msg', function (msg, data) {})

   Publicar mensaje: PubSub.publish ('msg', datos)

Nota: Primero importe el componente PubSub, importe PubSub desde'pubsub-js '

// 订阅消息   
//PubSub.subscribe('deleteTodo',function(msg,data){ 
 //     this.deleteTodo(index) ; 
 // 这样是存在问题的，是因为this使用的是回调函数中的，并不是外部的this ，于是，可以使用箭头函数，将外部this绑定
//})
PubSub.subscribe('deleteTodo', (msg,data) =>{
    
    // 箭头函数，绑定的是外部的this
  this.deleteTodo(index); 
})

Publica un mensaje en otro componente:

// 注意先导入 PubSub
 
PubSub.publish('deleteTodo',index) // indx 为传入的数据

Nota: 1) Ventajas: este método puede realizar la comunicación (datos) entre cualquier componente relacional

4. Comunicación entre componentes: Slot

El componente principal utiliza este método para pasar "datos de etiqueta" al componente secundario. Es decir, el componente secundario primero tiene un "marcador de posición", esperando que el componente principal pase una etiqueta específica, y el componente secundario se está procesando.

uso:

Subconjunto:

// 子组件  ：Child.vue
<template>
   <div>
      <slot name="xxx"> 不确定的标签结构1</slot> <!--定义架子，我理解为定义一个占位符 -->
      <div> 组件确定的标签结构</div>
      <slot name="yyy">不确定的标签结构2</slot>
   </div>
</template>

Componente padre:

// 父组件：Parent.vue
<child>
   <div slot="xxx">xxx对应的标签结构</div> <!-- 实际的标签结构-->
<div slot="yyy">yyy对应的标签结构</div> <!-- 实际的标签结构-->
</child>

Nota: Debido a que la etiqueta específica pasada está en el componente principal, la operación también debe colocarse en el componente principal. Es decir, el componente hijo debe pasarse después de que el componente padre se esté ejecutando y todas sus operaciones deben realizarse en el componente padre.

Como se muestra a continuación, estas operaciones en los componentes secundarios se colocan en el componente principal:

5. Describir el proceso de renderizado y actualización de componentes.

1. El proceso de renderizado inicial del componente vue

Analizar la plantilla en la función de renderizado

Activar respuesta, monitorear el captador y definidor de la propiedad de datos

Ejecute la función de renderizado para generar vnode, parche (elem, vnode)

2. Proceso de actualización de componentes de Vue

Modificar los datos, activar el setter (anteriormente, se ha monitorizado en el getter)

Vuelva a ejecutar la función de renderizado para generar newVnode

parche (vnode, newVnode)

5. El principio de realización del modelo v de enlace de datos bidireccional

El modelo v en vue puede lograr un enlace bidireccional. Su idea central es secuestrar los datos de Vue a través de Object.definePropery. Se
divide principalmente en tres partes. El
observador es el principal responsable del secuestro de datos de los datos de Vue para que sus datos tengan get and set method El
analizador de instrucciones es responsable de vincular los datos y las instrucciones, y el intento de vinculación de actualizar el
observador del método es responsable del monitoreo de datos. Cuando los datos cambian, se notifica al suscriptor y se llama a la función de actualización de vista para actualizar el vista.