Resumen de las preguntas comunes de la entrevista de VUE3 (leer esta es suficiente)

Los principios de respuesta de Vue2 y Vue3 se implementan en función de Object.defineProperty, pero Vue3 ha realizado algunas optimizaciones y mejoras en el rendimiento y la funcionalidad.

Principio de respuesta de Vue2:

Vue2 secuestra las propiedades de los datos a través de Object.defineProperty. Cuando el valor de la propiedad cambia, activará la función de actualización correspondiente para actualizar la vista.
Vue2 utiliza Watcher para realizar la vinculación bidireccional de datos y vistas. Cuando los datos cambian, Watcher notificará a la vista correspondiente para que se actualice.
Hay algunas fallas en el principio de respuesta de Vue2, como la incapacidad de monitorear los cambios de la matriz, lo que debe realizarse mediante métodos especiales.

El principio de respuesta de Vue3:

Vue3 usa Proxy en lugar de Object.defineProperty, y Proxy puede monitorear todas las propiedades del objeto, incluidas las operaciones de agregar y eliminar.
Vue3 usa WeakMap para almacenar dependencias, evitando el problema de pérdida de memoria de Watcher en Vue2.
Vue3 admite múltiples componentes de nodo raíz, lo que facilita la reutilización y combinación de componentes.

2. ¿Qué aporta Vue3?

Velocidad de renderizado más rápida: Vue3 utiliza objetos proxy Proxy, que pueden rastrear los cambios de datos más rápido, mejorando así la velocidad de renderizado.

Tamaño más pequeño: Vue3 es más pequeño que Vue2 y también admite la carga bajo demanda, lo que reduce el tiempo de carga de la página.

Mejor compatibilidad con TypeScript: la compatibilidad de Vue3 con TypeScript es más completa, lo que permite una mejor verificación de tipos y sugerencias de código.

Mejor encapsulación de componentes: Vue3 presenta la API de composición, que puede encapsular mejor la lógica de los componentes, haciendo que los componentes sean más reutilizables y más fáciles de mantener.

Mejor sistema de respuesta: el sistema de respuesta de Vue3 se ha refactorizado para manejar mejor los cambios en objetos y matrices anidados, al tiempo que proporciona más API para manejar datos de respuesta.

En resumen, Vue3 ofrece un mejor rendimiento, un tamaño más pequeño, una mejor compatibilidad con TypeScript, un mejor empaquetado de componentes y un sistema con mejor capacidad de respuesta, lo que permite a los desarrolladores desarrollar aplicaciones Vue de manera más eficiente.

3. Ventajas, beneficios y características de la composición API.

3.1 ¿Por qué elegir una API combinada?

Dado que vue2 tiene limitaciones:

La expansión lógica de los componentes conduce a una mala legibilidad de los componentes;

Incapacidad para reutilizar código entre componentes;

vue2 tiene soporte limitado para TS

3.2 ¿Qué problemas resuelve la API combinada?

1. Frente a las limitaciones de vue2, el mismo código se puede organizar en conjunto sin que se esparza por todos los rincones.

3.3 ¿Cuáles son las ventajas de la API combinada?

La API de composición organiza el código en función de dependencias lógicas, mejorando la legibilidad y el mantenimiento.

Menos código, mejor reutilización del código lógico

No se introduce ninguna sintaxis nueva, solo funciones simples.

excepcionalmente flexible

El mensaje de sintaxis de la herramienta es amigable porque es una función simple, es fácil realizar el mensaje de sintaxis y la compensación automática.

Mejor soporte de mecanografiado

En el componente funcional complejo, el código se puede organizar según las características y el código tiene una fuerte cohesión.

Reutilización de código entre componentes.

4. configuración de instalación

La función de configuración en Vue 3 recibe dos parámetros, accesorios y contexto.

1.: propsEl valor es un objeto, que incluye: pasado desde fuera del componente. Las propiedades recibidas se declaran dentro del componente. Cabe señalar que los accesorios en Vue3 son de solo lectura, es decir, el valor de los accesorios no se puede modificar en la función de configuración. Si necesita modificar los datos pasados, puede utilizar un objeto reactivo o una referencia.

2. context: El objeto de contexto.

attrs: El valor es un objeto que contiene propiedades pasadas desde fuera del componente pero no declaradas en la configuración de accesorios. Equivalente a esto.$attrs

slots: Contenido de tragamonedas recibido, equivalente a esto.$slots

emit: Función para distribuir eventos personalizados, equivalente a esto.$emit

Aviso:

1. Este gancho se ejecutará antes de crearse.

2. No hay esto dentro

3. Si el valor de retorno es un objeto, los pares clave-valor de este objeto se fusionarán en el gancho creado y también se podrá acceder al valor de datos correspondiente en la vista.

5. ref y reactivo

reactivo:

(1) Su respuesta es más "profunda" y la esencia subyacente es envolver los datos entrantes en un Proxy.

(2) El parámetro debe ser un objeto o una matriz. Es problemático hacer que un elemento del objeto responda. Necesito usar toRefs

árbitro:

(1), el parámetro de función puede ser un tipo de datos básico y también puede aceptar un tipo de objeto

(2) Si el parámetro es un tipo de objeto, la esencia de la capa inferior aún es reactiva y el sistema la convertirá automáticamente en: reactiva de acuerdo con el valor que le pasamos a ref.

(3) Al acceder a la plantilla, el sistema agregará automáticamente .value; en js, se requiere .value manual

(4), el principio de respuesta a la referencia depende Object.defineProperty()de get()y set().

6. Propiedades calculadas

6.1 ¿Qué es una propiedad calculada?

1. La función calculada se utiliza para definir propiedades calculadas, que no se pueden modificar.

2. Las expresiones de la plantilla son muy convenientes, pero están diseñadas para cálculos simples. Poner demasiada lógica en las plantillas puede hacerlas pesadas y difíciles de mantener.

3. Las propiedades calculadas también pueden depender de los datos de múltiples instancias de Vue. Siempre que alguno de los datos cambie, la propiedad calculada se volverá a ejecutar y la vista se actualizará.

Tanto los métodos como los calculados parecen ser capaces de lograr nuestras funciones, entonces, ¿por qué necesitamos un atributo calculado más?

razón:

1. La propiedad calculada se almacenará en caché y, si se usa varias veces, la propiedad calculada solo se llamará una vez;

2. El método se llamará una vez cuando se use una vez, por lo que el rendimiento de la propiedad calculada es relativamente mejor.

Nota :

La función de devolución de llamada debe regresar y el resultado es el resultado del cálculo.

Si los datos de los que depende la propiedad calculada cambian, se recalcularán

No hagas operaciones asincrónicas en los cálculos.

Avanzado : calculado tiene dos métodos, set() y get().

Las propiedades calculadas se pueden leer o modificar directamente

Si desea implementar la operación de modificación de la propiedad calculada, entonces el parámetro real de la propiedad calculada debe ser un objeto.

Método de obtención del activador de lectura de datos

Modifique los datos para activar el método set, y el parámetro formal de la función set es el valor que le asigna

7、reloj与relojEfecto

1. Ambos watchy watchEffectson oyentes , pero existen diferencias en la escritura y el uso, principalmente para presentar el uso de y y las diferencias entre ellos.vue3watchwatchEffect

2. El principio de funcionamiento de Watch : escuche una fuente de datos específica y realice efectos secundarios en la función de devolución de llamada . Es diferido por defecto: la devolución de llamada solo se ejecuta cuando cambia la fuente escuchada; sin embargo, se puede especificar que se ejecute inmediatamente la primera vez inicialmente configurando inmediato en verdadero. Puede especificar una supervisión profunda configurándola como profunda en verdadera.

3. inmediato : De forma predeterminada, el oyente necesita cambiar el valor detrás de los datos para que surta efecto. Si el oyente necesita entrar en vigor tan pronto como ingresa a la página, entonces debe usar inmediato. 4. profundo : De forma predeterminada, el oyente solo monitoreará los cambios de los datos en sí. Si desea monitorear en profundidad, debe usar profundo. 5. Inmediato y profundo se configuran en el tercer objeto de parámetro. El primer parámetro: a quién escuchar, el segundo parámetro: la función de devolución de llamada, el tercer parámetro: el objeto de configuración

7.1、efecto reloj

Características de la función watchEffect:

ventaja:

Las dependencias se recopilarán automáticamente y no es necesario pasar manualmente el contenido de escucha: escuchará automáticamente los datos de respuesta utilizados en la función de devolución de llamada.

El valor predeterminado inmediato es verdadero, por lo que se ejecutará inmediatamente durante la inicialización.

defecto:

No se puede obtener el valor antes del cambio (oldVal).

1. watch()Se ejecuta de forma perezosa: la devolución de llamada solo se ejecutará cuando cambie la fuente de datos. Pero en algunos escenarios, queremos ejecutar la devolución de llamada inmediatamente cuando se crea el oyente.

2. watchEffectEs equivalente a fusionar watchla fuente de dependencia y la función de devolución de llamada. Cuando se actualice cualquier dependencia receptiva que necesite, la función de devolución de llamada se volverá a ejecutar. A diferencia de watch, watchEffectla función de devolución de llamada se ejecutará inmediatamente (es decir { immediate: true })

3. En pocas palabras, watchEffect es una API reactiva en Vue3 que le permite monitorear los cambios en el estado reactivo y desencadenar efectos secundarios cuando cambia. Esta característica es muy útil: cuando necesitamos operar con datos receptivos, podemos reaccionar inmediatamente después de escuchar los cambios.

8. proporcionar e inyectar

1. Proporcionar e inyectar son un par de API nuevas para proporcionar datos en el componente principal y luego inyectar datos en el componente secundario.

2. proporcionar: es un objeto o una función que devuelve un objeto. Contiene cosas que se entregarán a las generaciones futuras, es decir, atributos y valores de atributos.

3. inyectar: una matriz de cadenas o un objeto. El valor del atributo puede ser un objeto que contenga valores predeterminados desde y predeterminados.

//En el componente principal, utilice proporcionar para proporcionar datos: 
//nombre: define el nombre de la propiedad proporcionada. 
//valor: el valor de la propiedad. 
 setup(){ 
    provide('info',"value") 
  } 
//
En el subcomponente, use inject para inyectar datos 
//name: reciba el nombre del atributo proporcionado por provide. 
//predeterminado: establece el valor predeterminado, puedes dejarlo en blanco, es un parámetro opcional. 
setup(){ 
    const info = inject("info") 
    inject('info',"set default value") 
    return { 
        info 
    } 
  } 
//
Cabe señalar que proporcionar e inyectar solo se pueden usar en la función de configuración, y Los datos proporcionados por provide solo se pueden utilizar en sus componentes secundarios. Si desea compartir datos entre componentes hermanos, puede usar un objeto compartido o usar una biblioteca de administración de estado como Vuex.

9.vue3 nuevo gancho de ciclo de vida

Se han agregado dos nuevas funciones de enlace de ciclo de vida en Vue3:

beforeUnmount: Se llama antes de descargar el componente y se puede utilizar para realizar algunos trabajos de limpieza, como cancelar la suscripción, borrar temporizadores, etc.

onRenderTracked: Se llama cuando se renderiza el componente y se puede utilizar para monitorear los cambios de estado del componente, como imprimir el estado del componente, registrar los cambios del componente, etc.

Además, Vue3 también optimiza y mejora la función de enlace del ciclo de vida original, como por ejemplo:

beforeCreatey createdfusionados en setupfunciones, haciendo que la inicialización de componentes sea más concisa y flexible.

beforeMounty mountedfusionados en onMountedfunciones, haciendo que el montaje de componentes sea más eficiente y controlable.

beforeUpdatey updatedfusionados en onUpdatedfunciones, haciendo que las actualizaciones de componentes sean más precisas y confiables.

beforeDestroyy destroyedfusionados en onUnmountedfunciones, haciendo que la desinstalación de componentes sea más segura y confiable.

Ejecute la secuencia final:

Ciclo de vida de Vue3: configuración

Ciclo de vida de Vue2: antes de crear

Ciclo de vida de Vue2: creado

Ciclo de vida de Vue3: onBeforeMount

Ciclo de vida de Vue2: antes de Mount

Ciclo de vida de Vue3: onMounted

Ciclo de vida de Vue2: montado

Ciclo de vida de Vue3: onBeforeUpdate

Ciclo de vida de Vue2: antes de la actualización

Ciclo de vida de Vue3: actualizado

Ciclo de vida de Vue2: actualizado

Ciclo de vida de Vue3: onBeforeUnmount

Ciclo de vida de Vue2: antes de desmontar

Ciclo de vida de Vue3: onUnmounted

Ciclo de vida de Vue2: desmontado

10. Función de gancho personalizada

1. Extraiga algunos métodos reutilizables en forma de funciones y cuélguelos como ganchos, que se pueden introducir y llamar en cualquier momento para lograr el objetivo de alta cohesión y bajo acoplamiento ;

2. Extraiga funciones reutilizables en archivos JS externos

3. El nombre de la función/el nombre del archivo comienza con el uso, como por ejemplo: useXX

4. Al citar, exponga la variable de respuesta o el método deconstruido explícitamente, como por ejemplo: const {nameRef, Fn} = useXX()

(Las variables y métodos de los ganchos personalizados se deconstruyen en la función de configuración)

10.1, la relación entre los Hooks personalizados de Vue3 y el Mixin de la era Vue2:

Mixins insuficientes En Vue 2, los mixins son la herramienta principal para abstraer partes de la lógica de los componentes en bloques reutilizables. Sin embargo, tienen varios problemas: 1. Los mixins son propensos a conflictos: dado que las propiedades de cada mixin se fusionan en el mismo componente, aún necesita conocer todas las demás características para evitar conflictos con los nombres de las propiedades. 2. La reutilización es limitada: no podemos pasar ningún parámetro a un mixin para cambiar su lógica, lo que reduce su flexibilidad para abstraer la lógica.

10.2 ¿Cuál es la diferencia y comparación entre los ganchos personalizados en vue3 y el mixin en vue2?

1. ¡Mezcla métodos y atributos que son difíciles de rastrear! Los ganchos personalizados de Vue3 pueden

2. Es imposible pasar parámetros a Mixin para cambiar la lógica, pero los Hooks personalizados de Vue3 pueden:

3. Las variables Mixin con el mismo nombre se sobrescribirán. El Hook personalizado de Vue3 puede cambiar el nombre de las variables con el mismo nombre cuando se introduce

11. toRef y toRefs

toRef y toRefs se pueden usar para copiar los atributos en reactivo y luego convertirlos en ref, y conserva tanto la capacidad de respuesta como las referencias, es decir, después de modificar los atributos copiados de reactivo, excepto que la vista se actualizará, el reactivo original El valor correspondiente dentro también se actualizará en consecuencia. Si conoce la copia superficial, entonces esta referencia es fácil de entender. Lo que copia es en realidad referencia + referencia receptiva. La diferencia entre agregar s y agregar s es la siguiente:

toRef: copia un solo atributo en reactivo y conviértelo en referencia toRefs: copia todos los atributos en reactivo y conviértelo en referencia

12、shallowReactive y superficialRef

1. superficialRef: tipo responsivo que solo maneja tipos de datos básicos

2. superficialReactivo: Responsivo (responsivo superficial) que solo se ocupa de las propiedades más externas del objeto.

3. Procesamiento de datos receptivo con funciones superficiales : solo se procesan los datos del objeto de primer nivel y los datos anidados más abajo, los datos de operación no son efectivos

4. shallowReativeEn shallowRefalgunos escenarios de aplicaciones especiales, el rendimiento se puede mejorar: el primero está dirigido a objetos y se utiliza para el procesamiento de datos de respuesta superficial, mientras que el segundo solo maneja la respuesta de tipos de datos básicos, no la respuesta de los objetos.

13、solo lectura y superficialSolo lectura

readonlyAmbos shallowReadonlypermiten que los datos receptivos solo tengan la capacidad de leer, el último es de solo lectura superficial, es decir, solo funciona en la primera capa de objetos de datos, anidamiento profundo, cuando se usa procesamiento, se modifica el soporte de datos profundos shallowReadonl().

1. Solo lectura: haga que los datos responsivos sean de solo lectura (solo lectura profunda), haga que los datos responsivos sean de solo lectura, reciba datos responsivos y procese, luego los datos recién asignados no están permitidos readonlyRevisar

2. Acepta un objeto (ya sea responsivo o normal) o un refproxy de solo lectura que devuelve un valor original

3. Solo lectura superficial: permite que los datos de respuesta se vuelvan de solo lectura (solo lectura superficial), reciba datos de respuesta, después del shallowreadonlyprocesamiento, se conviertan en datos de solo lectura, solo considere los datos de la primera capa del objeto, no se pueden modificar, pero los profundos los datos en el primer nivel de anidamiento admiten la modificación

4. Deje que los datos receptivos se conviertan en capacidad de solo lectura (solo lectura superficial)

14. toRaw y markRaw se convierten en datos normales y el atributo de marca no responde

toRaw, convierta el objeto responsivo ( reactiveresponsivo definido por la definición) en un objeto normal y luego asígnelo a una nueva variable (no afecta el objeto original)

markRaw, para marcar un objeto para que no pueda ser un objeto reactivo.

toRaw: Función: Convertir un objeto reactivo generado por reactivo en un objeto normal Escenario de uso:

1. Se utiliza para leer el objeto común correspondiente al objeto responsivo.

2. Todas las operaciones en este objeto común no provocarán actualizaciones de la página.

markRaw: Función: Marca un objeto para que nunca se convierta en un objeto responsivo. Escenarios de aplicación: 1. Algunos valores no deben establecerse como responsivos, como bibliotecas complejas de clases de terceros, etc. 2. Cuando la representación tiene datos inmutables Omitir transformaciones reactivas puede mejorar el rendimiento cuando se utilizan listas grandes de fuentes.

15. uso de referencia personalizada customRef

1. customRef: devuelve un objeto de referencia que puede mostrar el seguimiento de dependencias de control y desencadenar respuestas

16. Padre a hijo en vue3, hijo a padre

1. De padre a hijo:

1. Pase la etiqueta del componente secundario del componente principal.：传到子组件的数据名=‘需要传递的数据’

2. Reciba accesorios en el subcomponente y utilícelos en la plantilla.

2, hijo y padre:

1. El subcomponente activa el evento a través del segundo parámetro de la función de configuración, context.emit, para realizar la transmisión del hijo al padre.

17. Juicio de datos de respuesta isRef, isReactive, isReadonly, isProxy

1. isRef: determina si un valor es un objeto de referencia

2. isReactive: determina si un objeto es un proxy receptivo creado por reactivo

3. isReadonly: determina si un objeto es un proxy de solo lectura creado por solo lectura

4. isProxy: determina si un objeto es un proxy creado por reactivo o de solo lectura

18. ¿Usar ranuras en vue3?

1. Las ranuras slotgeneralmente se usan entre dos componentes padre-hijo. La aplicación más común es que UIcuando usamos componentes emergentes en algunas bibliotecas de componentes, podemos personalizar el contenido de los componentes emergentes. Este es el uso de Principio de las tragamonedas.

2. Entender:

slotes Vue3una etiqueta incorporada en .

slotEquivale a cavar una ranura para el subcomponente, que se puede utilizar para llenar el contenido.

Cuando se llama al componente secundario en el componente principal, el elemento de contenido entre las etiquetas del componente secundario es el contenido que se colocará y reemplazará slotla etiqueta.

3. Ranura con nombre: con un nombre 插槽. En pocas palabras, 具名插槽el propósito de esto es hacer un agujero para cada rábano, para que queden donde deben estar. Por ejemplo, namelas ranuras con <slot name="xx">se denominan ranuras con nombre.

4. Ranuras de alcance: las ranuras que pueden aceptar parámetros se denominan 作用域插槽.

19. ¿Guardia de ruta en BeforeRouteLeave, onBeforeRouteUpdate en vue3?

La protección de navegación proporcionada por vue-router se utiliza principalmente para proteger la navegación saltando o cancelando. Hay muchas formas de implementar la navegación de rutas: globalmente, específica para una única ruta o a nivel de componente.

1. El nuevo método onBeforeRouteLeave en el enrutador vue3 significa agregar un protector de navegación. Este método se activará cuando el componente esté a punto de salir, similar al anterior beforeRouteLeave, pero onBeforeRouteLeave se puede usar en cualquier componente. Cuando el componente está desinstalado, También se eliminarán las protecciones de navegación. Cuando usamos el enrutador para realizar un salto o retorno, se activará el método onBeforeRouteLeave.

2. onBeforeRouteUpdate: agregue un protector de navegación, que se activa cuando la ubicación actual está a punto de actualizarse.
importar {onBeforeRouteUpdate} desde "vue-router"; 
onBeforeRouteUpdate(to => { 
   console.log(to, "cambio de ruta"); 
}) 
;
3. onBeforeRouteLeave: agregue un protector de navegación, que se activa cuando el componente en la ubicación actual está a punto de salir.
//Utilice la protección en el componente para realizar algunas operaciones en caso de abandonar la página, 
beforeRouteLeave(to, from, next){ 
    if(from.path=='/b'){ //La ruta de la página actual 
        next( {replace: true,redirect: '/a'}); //Redirección de ruta de destino 
    } else { 
    next() 
    } 
}

20. ¿Usar vuex useStore en vue3?

1. En Vue3, useStorelas funciones se pueden utilizar para obtener instancias de la tienda Vuex. useStoreUna función es una función de la API de Vue Composition que se puede utilizar en componentes.

Los pasos para usar la función `useStore` son los siguientes: 
1.
Importe la función `useStore` y la función `createStore` en el componente. 
importar
{useStore, createStore} desde 'vuex' 
2.
Cree una instancia de tienda Vuex. 
const
store = createStore({ 
  state: { 
    count: 0 
  }, 
  mutaciones: { 
    increment(state) { 
      state.count++ 
    } 
  } 
}) 
3.
Utilice la función `useStore` en el componente para obtener la instancia de la tienda Vuex. 
export
default { 
  setup() { 
    const store = useStore() 
    return { 
      store 
    } 
  } 
} 
4.

Utilice la instancia de la tienda Vuex en el componente. 

<template> 
  <div> 
    <p>Recuento: { 
  
  { store.state.count }}</p> 
    <button @click="store.commit('increment')">Incremento</button> 
  </div> 
< /template> 
<script>
 
importar { useStore } desde 'vuex' 
export
default { 
  setup() { 
    const store = useStore() 
    return { 
      store 
    } 
  } 
} 
</script>

21. ¿Usar vue-router, useRoute y useRouter en vue3?

1. En Vue.js, useRoutehay useRouterdos funciones de enlace proporcionadas por Vue Router, que se utilizan para acceder a información de enrutamiento e instancias de enrutamiento en componentes.

2. useRoute es equivalente a this.$route en vue2
importar { useRoute } desde 'vue-router' 
export default { 
setup() { 
 const route = useRoute() 
 console.log(route.path) // ruta de enrutamiento actual 
 return { 
   route 
 } 
} 
}
3. useRouter es equivalente a esto.$router en vue2, puedes usar useRouter para enrutar el salto
importar { useRouter } desde 'vue-router' 
export default { 
setup() { 
 const router = useRouter() 
 console.log(router.currentRoute.value.path) // ruta de enrutamiento actual 
return
 { 
   router 
 } 
} 
}
4. Diferencia:

useRouteLa función devuelve el objeto de información de la ruta actual, incluida la ruta de enrutamiento, los parámetros, los parámetros de consulta y otra información.

useRouterLa función devuelve la instancia de Vue Router, podemos usar la función en el componente useRouterpara obtener la instancia de Vue Router.

22. ¿Sintaxis de configuración del script del componente de un solo archivo de Vue3?

1. <script setup> es un azúcar sintáctico en tiempo de compilación para usar la API combinada en un componente de archivo único (SFC). Tiene muchas ventajas sobre la sintaxis <script> normal.

Menos contenido repetitivo, código más conciso

Capacidad para declarar accesorios y lanzar eventos usando Typecript puro.

Mejor rendimiento en tiempo de ejecución (su plantilla se compilará en una función de renderizado en el mismo alcance, sin ningún proxy intermedio).

Mejor rendimiento de inferencia de tipos IDE (menos trabajo para el servidor de idiomas para extraer tipos del código).

23. Uso de nextTick en vue3

1. nextTick pospone la devolución de llamada para que se ejecute después del siguiente ciclo de actualización de DOM. Úselo inmediatamente después de cambiar algunos datos para esperar a que se actualice el DOM

2. Uso asincrónico:
importar { nextTick } desde 'vue' 
// Utilizar USE 
setup() { 
 const message = ref('¡Hola!') 
 const changeMessage = async newMessage => { 
   message.value = newMessage 
   await nextTick() 
   console.log('Ahora DOM se actualiza') 
 } 
} 
// uso básico 
nextTick(()=>{ 
  ... 
})

24. Prototipo de propiedades globales vinculantes

1. A través de config.globalProperties

2. Inyección mediante provisión: establezca un valor en la instancia de la aplicación que se pueda inyectar en todos los componentes dentro del alcance de la aplicación. Cuando el componente quiere utilizar el valor de provisión proporcionado por la aplicación, debe usarse injectpara recibir .

3. Importarlo globalmente en main.js y luego obtenerlo en el componente.

25. ¿Usar keeplive en vue3?

1. keep-aliveEs un componente abstracto proporcionado por Vue, que se utiliza principalmente para preservar el estado del componente o evitar volver a renderizarlo.

2. <keep-alive>Al empaquetar componentes dinámicos, las instancias de componentes inactivos se almacenan en caché en lugar de destruirse.

Similar <transition>a , <keep-alive>es un componente abstracto que no representa un elemento DOM por sí solo ni aparece en la cadena de componentes principales. Pero keep-alivealmacenará en caché todos los componentes que envuelve.

3. Uso:

1. Configure app.vue para usar v-if para determinar si se debe almacenar en caché

2. Agregue un metaatributo y agregue el identificador almacenado en caché en la metainformación de enrutamiento.

3. Realizar una actualización parcial de la página.

26. Biblioteca de componentes Element-Plus vant3.0ant

27. Los filtros se descartan en vue3 1. Filtros: los filtros pueden entenderse como un método especial para procesar datos

2. Vue3 necesita simplificar el código y repetir la función de filtro, básicamente se pueden implementar las funciones que puede realizar el filtro, los métodos y los atributos calculados. Así que simplemente elimine el código fuente vue del filtro para que sea más conveniente de mantener.