- ¿Cuáles son los comandos comunes de Vue y cuáles son sus usos?
- v-if: renderiza elementos según el valor de verdadero o falso, y crea o destruye elementos cuando cambia el valor
- v-show: cambie la visualización y ocultación de elementos según el valor de verdadero o falso, y no destruirá elementos
- v-for: Representar una lista basada en una matriz u objeto, vue2.0 o superior debe usarse con: clave
- v-bind: vincula dinámicamente una o más características, abreviado como:
- v-on: se utiliza para escuchar el evento dom del elemento especificado, vincular el detector de eventos, que se puede abreviar como @
- v-model: Realice el enlace de datos bidireccional de datos
- v-pre: salta el proceso de compilación de este elemento y sus elementos secundarios
- v-once: solo renderiza elementos y componentes una vez. Las nuevas renderizaciones posteriores, el elemento/componente y todos sus elementos secundarios se considerarán contenido estático y se omitirán. Esto se puede utilizar para optimizar el rendimiento de la actualización.
- El principio del enlace de datos bidireccional
Usando el secuestro de datos combinado con el modelo de editor-suscriptor,
Secuestrar el setter y getter de cada propiedad a través de Object.defineProperty(),
Publique mensajes a los suscriptores cuando cambien los datos y active las devoluciones de llamada de los oyentes correspondientes.
- ¿Cuáles son las formas de saltar y pasar parámetros en la ruta?
Salto declarativo:
1) Saltar por camino
<router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">Haga clic para ver la subpágina</router-link>
2) Saltar por nombre de ruta
<router-link :to="{name: 'detail', params:{id: 'abc'}}">Haga clic para ver la subpágina</router-link>
Salto funcional:
this.$router.push({ruta: '/home/sort/detail',query:{id: 'abc'}})
Pase el método del parámetro:
Params传参：this.$router.push({ name:'user',params: {userId: 123 }})
Ruta con nombre, los parámetros deben usarse con el nombre
Parámetro de consulta: <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">Haga clic para ver la subpágina</router-link>
- ¿Cuáles son los métodos de comunicación entre los componentes?
De padre a hijo:
Parámetros personalizados en el componente principal
<contador-com :num="10" str="abc"></contador-com>
Los subcomponentes aceptan parámetros
accesorios:{
"num":{tipo:Número,predeterminado:1},
}
niño padre:
Evento personalizado en el componente principal
<contador-com @setNum=”setNum”></contador-com>
Métodos:{
setNum(datos){
consola.log(datos)
}
}
Los subcomponentes desencadenan eventos a través del método $emit
Esto.$emit(“setNum”,{nombre:”123”})
Pasar parámetros a través de vuex
Pasar parámetros a través del bus de eventos
- Hable sobre la comprensión de los protectores de enrutamiento (hablando sobre la comprensión, generalmente es el puntaje total, qué es, dónde se usa, para qué se usa, cómo usarlo, qué precauciones, combinado con la descripción del proyecto es mejor)
La protección de enrutamiento, también conocida como protección de navegación, es una función de enlace que se activa cuando se producen saltos de enrutamiento. Puede realizar operaciones como interceptación y cancelación de enrutamiento. Se divide en protección de enrutamiento global, protección de enrutamiento de componentes y protección exclusiva de enrutamiento. Se utiliza principalmente para enrutamiento Autenticación de autorización de algunas páginas, mediante la confirmación de la información de inicio de sesión para determinar si permitir o bloquear,
- router.beforeEach((a,desde,siguiente)=>{
- if(a.ruta == '/iniciar sesión' || a.ruta == '/registrar'){
- próximo();
- }demás{
- alert('No has iniciado sesión, inicia sesión primero');
- siguiente('/iniciar sesión');
- }
- })
- Hable acerca de la comprensión de Vuex
Vuex es un modo de administración de estado + biblioteca. Administra el estado común de todos los componentes. Cuando el anidamiento de componentes es demasiado profundo y es difícil pasar valores, puede usar vuex para administrar el estado público. Por ejemplo, necesita acepta confirmar la hora del estado de inicio de sesión.
Hay cinco módulos State Getter Mutation Action Module en vuex
1) Los datos se definen en el estado, que se puede llamar en cualquier componente
this.$store.state.global nombre de datos
2) La mutación es la única forma de cambiar el estado en la tienda . Use la confirmación para activar la operación de mutación en la compilación . No puede realizar operaciones asincrónicas.
3) La acción es un módulo que realiza operaciones asincrónicas, pero solo puede cambiar el estado en el estado activando la mutación
this.$store.dispatch("asynAdd")
4) El captador es similar al calculado en vue, almacena en caché y procesa los datos en la Tienda para formar nuevos datos
5) módulos, cuando la cantidad de datos es grande, vuex aparecerá muy inflado, por lo que podemos usar módulos para realizar la segmentación modular, cada módulo tiene un estado, mutación, acción, captador y módulo separados
- Hable acerca de la comprensión de la mezcla
Mezcle en mixins, mixins es un objeto js, puede contener cualquier opción de función en el elemento de script en nuestro componente, cuando el componente usa el objeto mixins, todas las opciones del objeto mixins se combinarán con las opciones del componente en sí, que puede mejorar la reutilización del código, haciendo que el código sea fácil de mantener.
Cuando tenemos datos o funciones en múltiples componentes que son muy similares, podemos usar mixins para extraer las partes comunes, y los componentes las llaman a través de las funciones encapsuladas por mixins.
Cuando el valor combinado o la opción entran en conflicto, el valor del componente mismo anulará el valor combinado y la opción combinada se llamará antes que la opción del componente mismo.
- Hablar sobre la comprensión de las tragamonedas
Cuando se encapsula el componente, la parte incierta se puede encapsular como una ranura y luego determinarse al llamar. La ranura se divide en una ranura con nombre y una ranura anónima. Al definir una ranura anónima, solo es necesario definir <ranura></ slot>, cuando se usa, el valor en el componente se pasará a la ranura.
<plantilla>
<div clase="sobre">
<h1>Esta es una página para niños</h1>
<!-- Definir un espacio predeterminado -->
<ranura></ranura>
</div>
</plantilla>
Cuando hay más de una ranura en el componente, debe usar una ranura con nombre y usar nombre para especificar el nombre
<plantilla>
<div clase="sobre">
<h1>Esta es una página para niños</h1>
<!-- Agregue un atributo de nombre a la ranura, que es la llamada ranura con nombre -->
<ranura nombre="uno"></ranura>
<ranura nombre="dos"></ranura>
</div>
</plantilla>
<plantilla>
<div clase="sobre">
<h1>Esta es una página para padres</h1>
<niños>
<ranura en V de plantilla: una>
<p>una ranura</p>
</plantilla>
<ranura en V de plantilla: dos>
dos ranuras
</plantilla>
</niños>
</div>
</plantilla>
- Qué es cross-domain y cómo solucionarlo
La política del mismo origen del navegador estipula que la interacción de js solo puede ser en el mismo dominio. Cuando cualquiera de los protocolos, nombres de dominio y puertos de una URL de solicitud es diferente de la URL de la página actual, es de dominio cruzado.
Solución: Omitir la política del mismo origen del navegador configurando un proxy
- Habla sobre la experiencia de las solicitudes de embalaje.
Encapsule axios en el objeto de promesa y encapsule el consentimiento de configuración de solicitud requerido en el método. Después de llamar al método de solicitud, se puede usar de manera muy conveniente, ahorrando una gran cantidad de código, sin operaciones redundantes, haciendo que el código sea limpio y fácil de mantener. Legibilidad y reutilización mejoradas, en línea con las características de alta cohesión y bajo acoplamiento