[Actualizado continuamente] Una colección de preguntas de entrevistas de lectura obligada en el campo front-end

1. Escribe delante

  A veces, amigos de otros campos envían mensajes privados para hacer preguntas relacionadas con campos que no son de blogs y que tocan los puntos ciegos del conocimiento, como C ++, C #, gran interfaz ...

Muchos de mis amigos preguntaron sobre entrevistas. En mi artículo anterior, había un artículo fijado sobre un resumen de entrevistas en el campo de Python. Cuando tenga tiempo, continuaré actualizándolo e incluyendo preguntas valiosas en ese artículo. Si está interesado , Puedes leer:

¡Preguntas de la entrevista de Python con gran valor de referencia! Resumen de experiencias reales desde startups hasta fabricantes de primer nivel (actualizado continuamente)

Recientemente, varios amigos preguntaron sobre las preguntas de la entrevista inicial. Para ser honesto, es difícil para mí dar un resumen desde una perspectiva profesional, pero como todos lo necesitan, todavía consulté a amigos en campos relacionados durante mis fines de semana y algunos de los Los más convencionales en la actualidad. Los problemas se han resumido, así que tengo este artículo. Espero que pueda ayudarte.

¿El techo inicial es realmente bajo y el vicepresidente es raro? ¿Líder del equipo definitivo? ¿Tirar un puñado de arroz al teclado? Hay muchos chistes sobre la parte delantera, ¡pero ninguno importa! Si profundizas en tu campo, ¡te convertirás en un experto!

2. Resumen de la entrevista inicial

2.0.1 Cómo mejorar la velocidad de empaquetado de webpack

• Optimizar Loader
    Para Loader, Babel debe soportar la peor parte del impacto en la eficiencia del empaquetado. Debido a que Babel convertirá el código en una cadena para generar un AST, luego continuará transformando el AST y finalmente generará un nuevo código, cuanto más grande sea el proyecto, más código se convertirá y menor será la eficiencia. Por supuesto, esto se puede optimizar

Primero optimice el rango de búsqueda de archivos de Loader:

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        // js 文件才使用 babel
        test: /\.js$/,
        loader: 'babel-loader',
        // 只在 src 文件夹下查找
        include: [resolve('src')],
        // 不会去查找的路径
        exclude: /node_modules/
      }
    ]
  }
}

Para Babel, espero que solo funcione en código JS y que el código utilizado en node_modules se haya compilado, por lo que no es necesario procesarlo nuevamente.

Por supuesto, esto no es suficiente. También puede almacenar en caché los archivos compilados por Babel. La próxima vez, solo necesitará compilar los archivos de código modificados, lo que puede acelerar enormemente el tiempo de empaquetado.

2.0.2 Deduplicación de matrices

  Recorra la matriz anterior y luego consulte la nueva matriz con los elementos de la matriz anterior. Si el elemento no aparece en la nueva matriz, lo agregamos; de lo contrario, no lo agregamos. Primero encapsule una función, única:

function unique(arr){
    
    
var newArr =\[]
for(var i =0; i< arr.length; i++){
    
    
if (newArr.indexOf(arr\[i] === -1){
    
    
newArr.push(arr\[i])
}
}
return newArr
}
var demo = unique(\[])
console.log(demo)

2.0.3 ¿Cuántos métodos de almacenamiento en caché hay en el front-end?

• sessionStorage
  Pero cuando se cierra la página, los datos en sessionStorage se borrarán. Indexdb, de 50 MB, permite el almacenamiento de grandes cantidades de datos, proporciona una interfaz de búsqueda, admite operaciones asincrónicas y también puede crear índices. Las desventajas de indexDB son: no admite operaciones DO; no puede cruzar dominios
• localStorage
  El tamaño 5M solo puede almacenar datos en formato de cadena, por lo que es mejor convertir los datos al formato json cada vez que se almacenan y luego volver a convertirlos cuando se extraen. . El ciclo de vida es permanente, a menos que los datos se eliminen activamente, los datos nunca desaparecerán
• cookiec
  Cuando se establece una cookie en el navegador de un cliente, puede durar días, meses o incluso años. Esto permite que las preferencias del usuario y la información de acceso se guarden fácilmente sin requerir ningún recurso del servidor y se almacenen en la computadora del usuario, por lo que no suponen una carga adicional para el servidor. De hecho, es muy pequeño. Su tamaño está limitado a unos 4 KB. No puede almacenar grandes datos y no es fácil de leer

2.0.4 Describir nextTick?

Los métodos asincrónicos, el último paso de la representación asincrónica, están estrechamente relacionados con el bucle de eventos JS. Utiliza principalmente macrotareas y microtareas (setTimeout, promesa, etc.) y define un método asincrónico. Llamar a nextTick varias veces guardará el método en la cola y borrará la cola actual a través del método asincrónico.

2.0.5 ¿Optimización a nivel de paquete web?

Webpack comprime imágenes
Reducir el código redundante de ES6 a ES5
Extraer código común
Precompilar plantilla Optimización de compilación de proyectos Vue Crear análisis de resultados Optimizar SourceMap
Extraer componente CSS

2.0.6 ¿Optimización a nivel de código?

v-if y v-show distinguen escenarios de uso
calculan y observan distinguen escenarios de uso
v-for transversal debe agregar una clave al elemento y evite usar v-if al mismo tiempo
Optimización del rendimiento de listas largas
Destrucción de eventos
Carga diferida de recursos de imágenes< /span> Optimización del rendimiento de la lista infinita Introducción bajo demanda de complementos de terceros
Carga diferida de rutas

2.0.7 ¿Optimización de la tecnología Web?

Habilite la compresión gzip, el almacenamiento en caché del navegador, el uso de CDN y utilice Chrome Performance para encontrar cuellos de botella en el rendimiento.

2.0.8 ¿Estrategia de optimización del algoritmo diff?

Cuatro búsquedas de resultados, cuatro sugerencias

1. Antiguo antes y nuevo antes (compare el principio primero, luego inserte y elimine nodos)
2. Publicación antigua y nueva (compare el final, inserte o elimine antes) En el caso de eliminación)
3. Frente antiguo y dorso nuevo (relación de cabeza y cola, si esto sucede, implica mover nodos, entonces el nodo apuntado por el nuevo frente se moverá a la parte posterior del viejo) a>
4. Espalda vieja y frente nuevo (relación entre cola y cabeza, si esto sucede, implica mover nodos, luego el nodo apunta por el nuevo frente se trasladará antes del frente antiguo)

2.0.9 ¿Bucle de eventos? ¿Funciona en JS?

El bucle de eventos es un mecanismo en JavaScript que maneja la ejecución de código asincrónico. Es responsable de gestionar la programación y ejecución de tareas asincrónicas y agregarlas a la cola de ejecución.
En JavaScript, la función del bucle de eventos es garantizar que las tareas asincrónicas se ejecuten en el orden correcto y no bloqueen el hilo principal. Implementa operaciones asincrónicas sin bloqueo tomando continuamente tareas de la cola de ejecución y ejecutándolas

2.1.0 ¿Caché del navegador y su función?

El almacenamiento en caché del navegador es donde el navegador almacena copias de páginas web y recursos localmente para que puedan cargarse rápidamente en visitas posteriores. Su función es reducir la cantidad de solicitudes al servidor y el volumen de transmisión de la red, y mejorar la velocidad de carga de la página y la experiencia del usuario.
El almacenamiento en caché del navegador funciona guardando el recurso localmente en la primera solicitud y verificando las solicitudes posteriores para ver si el recurso ya existe y no ha caducado. Si el recurso ya existe y no ha caducado, el navegador lo cargará directamente desde la memoria caché en lugar de volver a descargarlo desde el servidor

2.1.1 ¿Cuál es el papel de los Web Workers?

Web Workers es una API de JavaScript proporcionada por el navegador para realizar tareas informáticas que requieren mucho tiempo en un hilo en segundo plano para evitar bloquear el hilo principal.
La función de Web Workers es mejorar la capacidad de respuesta del navegador para que la fluidez de la interfaz de usuario no se vea afectada al realizar cálculos complejos o procesar grandes cantidades de datos.
Web Workers implementa el procesamiento paralelo delegando tareas a subprocesos en segundo plano, utilizando así plenamente las capacidades de los procesadores multinúcleo. Pueden comunicarse con el hilo principal, pero no pueden acceder directamente al DOM ni realizar operaciones relacionadas con la UI

2.1.2 ¿Mecanismo de recolección de basura del navegador?

El mecanismo de recolección de basura del navegador es un mecanismo automático de administración de memoria que se utiliza para detectar y reciclar objetos que ya no se utilizan para liberar recursos de memoria.
El mecanismo de recolección de basura se implementa mediante el algoritmo de barrido de marcas. Funciona de la siguiente manera:
Fase de marcado: el recolector de basura comenzará desde el objeto raíz (como el objeto global), atravesará recursivamente todos los objetos y marcará los objetos a los que aún se puede acceder.
Fase de limpieza: el recolector de basura escanea la memoria del montón, borra los objetos no marcados y recupera el espacio de memoria que ocupan.
El objetivo del mecanismo de recolección de basura es identificar y reciclar objetos que ya no se utilizan para evitar pérdidas de memoria y mejorar la utilización de la memoria

2.1.3 ¿Cuál es el principio de implementación del DOM virtual?

El DOM virtual es esencialmente un objeto JavaScript, una abstracción del DOM real
Cuando el estado cambia, se registra la diferencia entre el árbol nuevo y el antiguo< a i=2>Finalmente actualice las diferencias con el dominio real

3. Resumen relacionado con CSS

3.0.1 ¿Cómo funciona el orden en cascada en CSS?

El orden de apilamiento (índice z) se utiliza para controlar el orden de apilamiento de los elementos en la dirección vertical. Los elementos con valores de orden de apilamiento más altos aparecerán encima de los elementos con valores de orden de apilamiento más bajos. De forma predeterminada, el valor del orden de apilamiento es automático.

3.0.2 ¿Cuál es la diferencia entre pseudoclases y pseudoelementos en CSS? ¿Ejemplo?

Las pseudoclases se utilizan para agregar estados especiales a los selectores, como :hover, :active, etc. Los pseudoelementos se utilizan para agregar elementos especiales al selector, como ::before, ::after

/* 伪类示例 */
a:hover {
    
    
  color: red;
}

/* 伪元素示例 */
p::before {
    
    
  content: "前缀";
}

3.0.3 ¿Cuál tiene mayor prioridad, v-if o v-for?

En vue2, v-for tiene mayor prioridad que v-if
En vue3, es exactamente lo contrario, v-if tiene mayor prioridad que v-for

3.0.4 ¿Cuál es la función de BFC en CSS?

BFC (contexto de formato a nivel de bloque) es un modo de renderizado en CSS que crea un entorno de renderizado independiente en el que los elementos se disponen y posicionan de acuerdo con ciertas reglas. Las funciones de BFC incluyen: limpiar flotaciones y evitar márgenes superpuestos

3.0.5 ¿Qué es el diseño de flexbox en CSS y cuáles son sus ventajas?

El diseño Flexbox es un módulo CSS para crear diseños flexibles y responsivos. Logra potentes capacidades de diseño mediante la combinación de contenedores flexibles y elementos flexibles. Sus ventajas incluyen facilidad de uso, gran adaptabilidad y control flexible de alineación y distribución.

3.0.6 ¿Qué es el modelo de caja CSS, describirlo?

El modelo de caja CSS es un concepto utilizado para diseñar y posicionar elementos. Consta del área de contenido, relleno, bordes y márgenes, que a su vez envuelven el elemento.

3.0.7 ¿Describir los selectores y sus prioridades en CSS?

Los selectores CSS se utilizan para seleccionar elementos HTML a los que se deben aplicar estilos. Las reglas de prioridad de los selectores son: estilo en línea > selector de ID > selector de clase, selector de atributos, selector de pseudoclase > selector de elementos > selector universal. Al mismo tiempo, usar! Importante puede aumentar la prioridad del estilo.

4. Resumen relacionado con Vue

4.0.1 ¿Cuál tiene mayor prioridad, v-if o v-for?

  En vue2, v-for tiene mayor prioridad que v-if. Al juntarlos, se puede ver en la función de renderizado de salida que el bucle se ejecutará primero y luego se juzgarán las condiciones, incluso si solo renderizamos una pequeña parte. parte de los elementos de la lista, También tienes que recorrer la lista completa cada vez que vuelves a renderizar, lo cual es un desperdicio, además, cabe señalar que en vue3 es exactamente lo contrario.v-if tiene un tiene mayor prioridad que v-for, por lo que cuando se ejecuta v-if, si la variable llamada aún no existe, se producirá una excepción.

4.0.2 ¿Describe las características de 3.0?

• Cambios en el mecanismo de monitoreo
  3.0 traerá una implementación de observador basada en proxy Proxy, que proporcionará seguimiento reactivo con cobertura completa del idioma. Esto elimina muchas limitaciones de la implementación basada en Object.defineProperty en Vue 2: (solo puede monitorear propiedades, no objetos, detectar la adición y eliminación de propiedades, detectar cambios en el índice y la longitud de la matriz, admitir Map, Set, WeakMap y WeakSet)< /span>
• Plantilla
  No hay cambios importantes en la plantilla, solo se cambia la ranura de alcance. El mecanismo 2.x hace que la ranura de alcance cambie y el componente principal se restablecerá. -rendered, y 3.0 cambió la ranura de alcance a una función, que solo afecta la renderización de subcomponentes y mejora el rendimiento de la renderización.
  Al mismo tiempo, vue3.0 también realizará una serie de cambios en la función de renderizado para que sea más fácil acostumbrarse a usar la API directamente para generar vdom
• Declaración de componente de estilo objeto
  Los componentes en vue2.x se pasan en una serie de opciones a través de declaraciones, y la combinación con TypeScript debe realizarse a través de algunos decoradores. , aunque puede realizar la función, es más problemático. 3.0 modificó el método de declaración de componentes y lo cambió a un método de escritura de clases, lo que facilita la integración con TypeScript.
  Además, el código fuente de vue también está escrito en TypeScript. De hecho, cuando las funciones del código son complejas, debe existir un sistema de tipo estático para realizar alguna gestión auxiliar. Ahora vue3.0 se ha reescrito completamente en TypeScript, lo que facilita la combinación de TypeScript con API expuestas externamente. De hecho, un sistema de tipo estático es necesario para el mantenimiento de código complejo
• Otros cambios
  (1) Compatibilidad con el renderizador personalizado, de modo que weex se pueda ampliar personalizando el renderizador en lugar de bifurcar directamente el código fuente.
  (2) Admite componentes Fragment (múltiples nodos raíz) y Protal (representación de contenido en otras partes del dom), y se ha ocupado de algunos escenarios especiales
  (3) Basado en la optimización de agitación de árboles, más construido -in se proporcionan funciones

4.0.3 ¿Qué patrones de diseño se utilizan en vue?

• Modo de fábrica: Virtual DOM devuelve el Vnode de la etiqueta base y el componente Vnode

• Modo de caso único: el método de registro del complemento de instalación de vuex y vue-router determina si hay una instancia en el sistema y la devuelve directamente

• Modelo de publicación-suscripción (mecanismo de eventos vue)

• Patrón de observador (principio de datos reactivos)

• Modo de decoración: (Uso de @decorator)

• Modo de estrategia: se refiere a que el objeto tiene un determinado comportamiento, pero en diferentes escenarios, el comportamiento tiene diferentes soluciones de implementación, como la estrategia de fusión de opciones

4.0.4 Principio de compilación de plantillas

El proceso de compilación de Vue es el proceso de convertir una plantilla en una función de renderizado, que se divide en los siguientes tres pasos:

1. Convertir cadenas de plantilla en elementos AST (analizador)
2. Marcado de nodo estático de AST, utilizado principalmente para la optimización de la representación DOM virtual (optimizador)
3. Utilice elementos AST para generar una cadena de código de función de representación (generador de código)

export function compileToFunctions(template) {
    
    
  // 我们需要把html字符串变成render函数
  // 1.把html代码转成ast语法树  ast用来描述代码本身形成树结构 不仅可以描述html 也能描述css以及js语法
  // 很多库都运用到了ast 比如 webpack babel eslint等等
  let ast = parse(template);
  // 2.优化静态节点
  // 这个有兴趣的可以去看源码  不影响核心功能就不实现了
  //   if (options.optimize !== false) {
    
    
  //     optimize(ast, options);
  //   }

  // 3.通过ast 重新生成代码
  // 我们最后生成的代码需要和render函数一样
  // 类似_c('div',{id:"app"},_c('div',undefined,_v("hello"+_s(name)),_c('span',undefined,_v("world"))))
  // _c代表创建元素 _v代表创建文本 _s代表文Json.stringify--把对象解析成文本
  let code = generate(ast);
  //   使用with语法改变作用域为this  之后调用render函数可以使用call改变this 方便code里面的变量取值
  let renderFn = new Function(`with(this){return ${
      
      code}}`);
  return renderFn;
}

4.0.5 ¿Cuáles son las diferencias entre los principios responsivos?

Vue3.x usa Proxy en lugar de Object.defineProperty. Porque Proxy puede monitorear directamente cambios en objetos y matrices, y tiene hasta 13 métodos de interceptación.

import {
    
     mutableHandlers } from "./baseHandlers"; // 代理相关逻辑
import {
    
     isObject } from "./util"; // 工具方法

export function reactive(target) {
    
    
  // 根据不同参数创建不同响应式对象
  return createReactiveObject(target, mutableHandlers);
}
function createReactiveObject(target, baseHandler) {
    
    
  if (!isObject(target)) {
    
    
    return target;
  }
  const observed = new Proxy(target, baseHandler);
  return observed;
}

const get = createGetter();
const set = createSetter();

function createGetter() {
    
    
  return function get(target, key, receiver) {
    
    
    // 对获取的值进行放射
    const res = Reflect.get(target, key, receiver);
    console.log("属性获取", key);
    if (isObject(res)) {
    
    
      // 如果获取的值是对象类型，则返回当前对象的代理对象
      return reactive(res);
    }
    return res;
  };
}
function createSetter() {
    
    
  return function set(target, key, value, receiver) {
    
    
    const oldValue = target[key];
    const hadKey = hasOwn(target, key);
    const result = Reflect.set(target, key, value, receiver);
    if (!hadKey) {
    
    
      console.log("属性新增", key, value);
    } else if (hasChanged(value, oldValue)) {
    
    
      console.log("属性值被修改", key, value);
    }
    return result;
  };
}
export const mutableHandlers = {
    
    
  get, // 当获取属性时调用此方法
  set, // 当修改属性时调用此方法
};

4.0.6 ¿Cómo se implementa el enlace de datos bidireccional?

El enlace de datos bidireccional en Vue se implementa mediante la directiva v-model. v-model puede crear un enlace de datos bidireccional en elementos de formulario (como,,). Cuando la entrada del usuario cambia el valor del elemento del formulario, el modelo de datos se actualizará automáticamente; por el contrario, cuando el valor del modelo de datos cambia, el elemento del formulario también se actualizará automáticamente.

4.0.7 ¿Ganchos del ciclo de vida? ¿Orden de ejecución?

Los enlaces del ciclo de vida en Vue incluyen beforeCreate, creado, antes de Montar, montado, antes de Actualizar, actualizado, antes de Destroy y destruido. Su orden de ejecución es el siguiente:

beforeCreate, creado antes de Mount, montado, beforeUpdate, actualizado antes de Destroy, destruido

4.0.8 ¿Cómo se implementa el enrutamiento?

El enrutamiento en Vue se implementa a través de Vue Router. Vue Router es el administrador de enrutamiento proporcionado oficialmente por Vue.js, que permite a los desarrolladores implementar aplicaciones de página única (SPA) en aplicaciones Vue. Vue Router asocia rutas URL con componentes mediante la configuración de relaciones de mapeo de rutas y proporciona funciones de navegación para que los usuarios puedan cambiar de vista sin actualizar la página.

4.0.9 ¿Cuál es la diferencia entre reloj y computado?

Tanto el reloj como el calculado se pueden utilizar para monitorear cambios en los datos, pero su uso e implementación son ligeramente diferentes. Watch se utiliza para monitorear cambios de datos específicos y realizar las operaciones correspondientes cuando los datos cambian. calculado se utiliza para calcular dinámicamente un nuevo valor basado en los datos dependientes y almacenar en caché el valor. Solo se volverá a calcular cuando los datos dependientes cambien.

4.1.0 ¿Qué es la inyección de dependencia? ¿Sus escenarios de aplicación?

La inyección de dependencia es un patrón de diseño que se utiliza para pasar dependencias de un componente a otro. En Vue, la inyección de dependencia se implementa mediante las opciones de proporcionar e inyectar. El componente principal proporciona datos mediante proporcionar y luego el componente secundario inyecta estos datos mediante inyección. Es muy útil en la comunicación de componentes en múltiples niveles.

4.1.1 ¿Cuál es la diferencia entre acción y mutación?

Las operaciones en mutación son una serie de funciones síncronas utilizadas para modificar el estado de variables en estado. Cuando utilice vuex, debe enviar el contenido que debe operarse mediante confirmación. La mutación es muy similar a los eventos: cada mutación tiene un tipo de evento de cadena (tipo) y una función de devolución de llamada (controlador). Esta función de devolución de llamada es donde se realizan los cambios de estado reales y acepta el estado como primer parámetro:

const store = new Vuex.Store({
    
    
  state: {
    
    
    count: 1
  },
  mutations: {
    
    
    increment (state) {
    
    
      state.count++      // 变更状态
    }
  }
})

4.1.2 ¿Cuál es la diferencia entre enrutador y ruta?

router es un objeto de VueRouter. A través de Vue.use(VueRouter) y el constructor de VueRouter, se obtiene un objeto de instancia de router. Este objeto es un objeto global que contiene todas las rutas y muchos objetos clave y atributos.
La ruta es un objeto de ruta de salto. Cada ruta tendrá un objeto de ruta, que es un objeto local y puede obtener el nombre, ruta, parámetros y consulta correspondientes

4.1.3 ¿Qué es una tragamonedas? ¿Ejemplo con espacios con nombre y espacios con alcance?

<!-- 父组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot :data="data"></slot>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot name="header">默认标题</slot>
    <slot :data="computedData">{
    
    {
    
     computedData }}</slot>
  </div>
</template>

4.1.4 ¿Cómo funciona el sistema de animación? ¿Un ejemplo sencillo?

El sistema de animación de Vue.js se implementa mediante transiciones CSS y clases de animación. Al agregar una clase de transición o una clase de animación a un elemento, se puede activar el efecto de transición o el efecto de animación correspondiente. Ejemplo:

<transition name="fade">
  <div v-if="show">显示内容</div>
</transition>

<!-- CSS样式 -->
<style>
.fade-enter-active, .fade-leave-active {
    
    
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
    
    
  opacity: 0;
}
</style>

4.1.5 ¿Mecanismo de manejo de errores? ¿Cómo capturar?

Vue.js proporciona un mecanismo de manejo de errores global y un mecanismo de manejo de errores a nivel de componente. El manejo de errores globales puede capturar y manejar errores a través de la función de enlace errorCaptured. El manejo de errores a nivel de componente puede capturar y manejar errores a través de la función de enlace errorCaptured o la opción errorHandler

4.1.6 ¿Cuáles son las limitaciones de los arreglos reactivos? ¿Cómo resolver?

El sistema responsivo de Vue.js no puede rastrear métodos de mutación de matriz (como push, pop, splice, etc.). Para resolver esta limitación, Vue proporciona algunos métodos especiales, como Vue.set, vm.$set y Array.prototype.splice. Estos métodos se pueden utilizar para actualizar una matriz y mantenerla receptiva.

4.1.7 ¿Cuál es la diferencia entre API de composición y API de opciones?

La API de composición es una nueva forma de organizar la lógica de los componentes introducida en Vue.js 3. Permite a los desarrolladores organizar y reutilizar la lógica a través de funciones en lugar de objetos de opción. Por el contrario, la API de opciones es una forma comúnmente utilizada de organizar la lógica de los componentes en Vue.js 2. Los datos y métodos del componente se definen a través de las propiedades en el objeto de opciones.

4.1.8 ¿Qué es el suspenso? ¿Qué hace?

El suspenso es un mecanismo introducido en Vue.js 3 para manejar el estado de carga de componentes asincrónicos. Puede mostrar un marcador de posición antes de cargar el componente asíncrono y representar el contenido del componente asíncrono después de cargarlo. Esto puede manejar mejor el proceso de carga de componentes asincrónicos y proporcionar una mejor experiencia de usuario.

4.1.9 ¿Cuáles son las funciones de proporcionar e inyectar? ¿Por favor da un ejemplo?

proporcionar e inyectar se utilizan para implementar la inyección de dependencia entre componentes. Proporcione datos utilizando provide en el componente principal y luego inyecte estos datos en el componente secundario utilizando inject. Ejemplo:

// 父组件
const Parent = {
    
    
  provide: {
    
    
    message: 'Hello Spider！'
  },
  // ...
}

// 子组件
const Child = {
    
    
  inject: ['message'],
  created() {
    
    
    console.log(this.message); // 输出：Hello Spider!
  },
  // ...
}

4.2.0 ¿Cuál es la diferencia entre watchEffect y watch? ¿cómo utilizar?

watchEffect se utiliza para monitorear cambios en los datos receptivos y realizar las operaciones correspondientes en la función de devolución de llamada. Realiza un seguimiento automático de las dependencias y vuelve a ejecutar funciones de devolución de llamada cuando cambian las dependencias. Watch se utiliza para monitorear datos de respuesta específicos y realizar las operaciones correspondientes cuando cambian. Le permite especificar exactamente qué datos escuchar y proporciona más opciones de configuración. En términos generales, si solo necesita monitorear los cambios en los datos receptivos y realizar las operaciones correspondientes, puede usar watchEffect; si necesita un control más detallado, puede usar watch

5. Resumen relacionado con React

5.0.1 ¿Cuáles son los conceptos centrales?

React es una biblioteca de JavaScript para crear interfaces de usuario. Sus conceptos centrales son la componenteización y la programación declarativa. React divide la interfaz de usuario en componentes reutilizables independientes y utiliza sintaxis declarativa para describir el estado de los componentes y la relación entre la UI, lo que facilita y mantiene la creación de UI complejas.

5.0.2 ¿Métodos del ciclo de vida? ¿Enumerar algunos?

Los métodos del ciclo de vida de React son métodos específicos que se ejecutan en diferentes etapas de un componente. A continuación se muestran algunos métodos de ciclo de vida de React comúnmente utilizados:

**
componenteDidMount: se llama inmediatamente después de montar el componente
componenteDidUpdate: se llama después de que se actualiza el componente
componenteWillUnmount: llamado antes de descargar el componente
mustComponentUpdate: determina si es necesario volver a renderizar el componente
getDerivedStateFromProps: actualiza el estado según los cambios en los accesorios* *

5.0.3 ¿Contexto de reacción? ¿efecto?

React Context es un mecanismo para compartir datos dentro del árbol de componentes. Puede evitar pasar datos capa por capa a través de accesorios, lo que hace que el intercambio de datos entre componentes sea más simple y eficiente. React Context proporciona componentes de proveedor y consumidor para proporcionar y consumir datos compartidos

5.0.4 ¿Reaccionar enrutador? ¿efecto?

React Router es una biblioteca en React para manejar el enrutamiento. Proporciona una forma de implementar la funcionalidad de navegación y enrutamiento en una aplicación de una sola página. React Router puede ayudar a los desarrolladores a implementar funciones como cambiar entre páginas, pasar parámetros de URL y enrutamiento anidado.

5.0.5 ¿Ganchos de reacción? ¿efecto?

React Hooks es una característica introducida en React versión 16.8 para usar el estado y otras características de React en componentes funcionales. Los ganchos proporcionan una manera de administrar el estado y manejar los efectos secundarios sin escribir componentes de clase, lo que hace que los componentes de funciones tengan las capacidades de los componentes de clase.

  Bueno, es hora de decir adiós a todos nuevamente. La creación no es fácil, por favor dame el visto bueno y vete. Su apoyo es la fuerza impulsora de mi creación, espero brindarles más artículos de alta calidad.