Recientemente, presté atención a las preguntas iniciales de la entrevista y puedo compartirlas con usted. Si algunas explicaciones no son completas o son incorrectas, puedo corregirlas y comunicarme.
Pregunta 1: Principio de respuesta de Vue
1. El atributo de datos se convierte en captador, definidor y registra las dependencias correspondientes, y las dependencias correspondientes serán notificadas cuando cambien
2. Cada instancia de componente tiene una instancia de observador correspondiente, y la instancia de observador dependerá del setter correspondiente
3. Cuando los datos cambien, se llamará al colocador, el colocador notificará al observador correspondiente y el observador correspondiente actualizará la vista
Pregunta 2: ¿Cuál es el principio del enlace bidireccional v-model?
Respuesta: El principio del enlace bidireccional del modelo v se realiza principalmente a través del secuestro de datos y el modo de suscripción de publicación vue.
La razón principal es que la implementación del enlace bidireccional depende principalmente de Object.defineProperty (). A través de esta función, todas las propiedades pueden ser secuestradas. En dep, cuando los datos cambien, el observador será notificado y el observador actualizará la vista.
Publica modo suscriptor, por ejemplo, vas a la librería a comprar un libro, pero el libro ya no está, pero puedes dejar un número de teléfono, espera a que llegue el libro para notificarte, luego el cliente que deja el número de teléfono es un suscriptor, y la librería reservará el número de teléfono cuando llegue el libro Las personas en el folleto serán notificadas una por una, este es el modo de publicación
Pregunta 3: ¿Por qué v-for necesita agregar una clave?
Respuesta: v-forAl actualizar la lista de elementos renderizados, 就地复用se utiliza la estrategia predeterminada; cuando se modifican los datos de la lista, se juzgará si un valor se modifica de acuerdo con el valor clave. Si se modifica, el elemento se volverá a renderizar, de lo contrario se reutilizará el elemento anterior. ;
https://www.jianshu.com/p/4bd5e745ce95 Este artículo es muy bueno
Problema 3: Texto fuera de límites omitido
//单行显示
overflow : hidden;
text-overflow : elipsis;
write-space :nowrap;
width : 100px;
//多行显示
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;Pregunta 4: La diferencia entre la computadora vue y el reloj
respuesta:
Propiedad calculada calculada:
1. Admite el almacenamiento en caché, solo cuando los datos dependientes cambian, el cálculo se volverá a calcular
2. Asincrónico no es compatible, no es válido cuando hay operaciones asincrónicas en el cálculo y no puede monitorear los cambios de datos
3. Los valores de los atributos computados se almacenarán en caché de manera predeterminada, y los atributos computados se almacenarán en caché en función de sus dependencias de respuesta, es decir, se calcularán en función de los datos declarados en data.
4. Si un atributo es calculado por otros atributos, este atributo depende de otros atributos, es un muchos a uno o uno a uno, generalmente calculado
5. Si el valor del atributo calculado es una función, el método get se usará de manera predeterminada; el valor de retorno de la función es el valor del atributo del atributo; en el cálculo, el atributo tiene un método get y set, y cuando los datos cambian, el método set se llama .
Ver propiedad de escucha:
1. El almacenamiento en caché no es compatible y los cambios de datos activarán directamente las operaciones correspondientes;
2. El reloj admite asincrónico;
3. La función de monitoreo recibe dos parámetros, el primer parámetro es el último valor, el segundo parámetro es el valor antes de la entrada;
4. Cuando cambia un atributo, se debe realizar la operación correspondiente: uno a muchos;
5. Hay dos métodos en él:
immediate: true
表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
deep: true
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。Pregunta 5: ¿Por qué los datos en vue son una función y no un objeto?
Si dos instancias se refieren al mismo objeto, cuando las propiedades de una instancia cambian, las propiedades de la otra instancia también cambiarán. Solo cuando las dos instancias tienen su propio alcance, no interferirán entre sí. Esto se debe a las características de JavaScript, en un componente los datos deben existir en forma de función, no de objeto. Los datos en la compilación se escriben como una función, y los datos se definen en la forma del valor de retorno de la función, de modo que cada vez que se reutilice el componente, se devolverán nuevos datos, lo que significa que cada instancia del componente tiene su propio espacio privado de datos, y solo serán responsables de los datos que mantienen sin causar confusión. Y simplemente escrito en forma de objeto, es decir, todas las instancias de componentes comparten los mismos datos, por lo que cambiar uno cambiará todo.
Pregunta 6: El método de salto de enrutamiento v-router
<router-link :to="{name: '路有名'}"></router-link>
<router-link :to="{path: '路有路径'}"></router-link>
2. query传参
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
3. params传参
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失Pregunta 7: ¿Qué son los elementos en línea y de bloque, y dónde está la diferencia?
respuesta:
Los elementos de bloque HTML ocupan una sola línea y se pueden cambiar de tamaño. Se pueden configurar las propiedades de margen y relleno
Los elementos de bloque HTML no ocupan una sola línea y no se pueden controlar en tamaño. Solo se pueden configurar las propiedades izquierda y derecha del margen y el relleno
Pregunta 8: ¿Cuáles son los métodos para limpiar el flotador?
Los cuatro métodos más utilizados para limpiar flotadores, así como sus ventajas y desventajas.
Pregunta 9: ¿Cómo entender js esto?
Como entender el problema que apunta esto en JS - Tutupipi - 博客园
Pregunta 10: ¿Cuál es la diferencia entre tipos primitivos y tipos de referencia?
1. Los tipos de datos primitivos incluyen: Number.String. Boolean. Null. Undefine.
2. Los tipos de datos de referencia incluyen: Object.
Array. Pertenece a datos de uso frecuente. Los tipos de datos de referencia se almacenan en el montón, lo que ocupa un gran espacio y no tiene un tamaño fijo.
4. Diferentes formas de pasar valores: los tipos de datos básicos se pasan por valor y el valor de un tipo de datos básico no se puede cambiar. Tipo de datos de referencia: pasado por referencia, el valor del tipo de referencia se puede cambiar.
5.1 La diferencia entre Número (2) y
Número (1) es el tipo de datos básicos, y Número (1) es el tipo de objeto de embalaje.
Pregunta 11: Cómo clonar en profundidad un objeto
Pregunta 12: ¿Las promesas son sincrónicas o asincrónicas?
promiss es síncrono, sus métodos then y catch son asíncronos
Pregunta 13: Bucle de eventos
Evento Loop_Wangzai Little Fist I Blog-CSDN Blog_Event Loop
El bucle de eventos incluye
tareas síncronas: ejecutadas en el subproceso principal
Tareas asincrónicas: ahora se ejecutan en la cola de tareas (divididas en macro tareas y micro tareas)
Tareas de macro: stript (código completo), setTimeOut, setInterval, I/O, interacción de interfaz de usuario, setImmdiate
Microtareas: Promise's then, catch, finalmente y process's nextTick son todas microtareas
Si la promesa y nextTick existen al mismo tiempo, ejecute nextTick primero
Tareas de sincronización > Microtareas > Macrotareas
Pregunta 14: Cómo prevenir el burbujeo
Burbujeo de eventos:
Del elemento más específico al menos específico (de adentro hacia afuera)
Cuando se activa el evento del subelemento (origen del evento), el evento pasará a lo largo de la relación de contención al nivel superior a su vez, y cada nivel puede percibir el evento hasta que se active el elemento raíz (raíz).
Método 1: Agregar event.stopPropagation() a la función correspondiente
Método 2: determinar si event.target y event.currentTarget son iguales
event.target: se refiere al elemento que realmente activa el evento
event.currentTarget: se refiere al elemento que está vinculado al detector de eventos (el elemento principal que activa el elemento del evento)
En este momento, se considera que los dos son iguales y se ejecuta la función de procesamiento correspondiente; cuando el evento sube al nivel superior, event.currentTarget se convierte en el elemento de nivel superior y, en este momento, se considera que los dos no son iguales y no se realiza ninguna lógica de procesamiento de respuesta.
Método 3: event.preventDefault() Durante el procesamiento del evento, el burbujeo del evento no está bloqueado, pero el comportamiento predeterminado está bloqueado (solo ejecuta todos los cuadros emergentes, pero no ejecuta saltos de hipervínculo)
Pregunta 15: La diferencia entre funciones de flecha y funciones ordinarias
Función de flecha
1. Cuando solo hay un parámetro, el parámetro no necesita agregar paréntesis. Si no hay parámetros o 2 o más parámetros, se deben agregar paréntesis. 2. Cuando solo hay una declaración de retorno, puede omitir { }
y return, y lo hará automáticamente Si agrega return, debe agregar {} y return al devolver varias declaraciones
3. Cuando la función de flecha devuelve un objeto, debe agregar paréntesis fuera del objeto.
La diferencia entre la función este punto de la flecha y la función ordinaria
1. El este punto de la función ordinaria:
apunta a su llamador. Si no hay llamador, apunta a la ventana por defecto.
2. El punto de la flecha función:
apunta al objeto donde se define la función de flecha, en lugar de El objeto en el que se encuentra cuando se usa, apunta al this del padre de forma predeterminada Para resumir
: la función de flecha no tiene su propio this, su this se hereda , y apunta al objeto en el que se encuentra cuando se define de forma predeterminada
La diferencia entre las funciones de flecha y las funciones ordinarias
1. Las funciones de flecha son funciones anónimas y las funciones ordinarias pueden ser funciones anónimas o funciones con nombre
2. Las funciones de flecha no se pueden usar como constructores y la nueva palabra clave no se puede usar 3. Las
funciones de flecha tienen sin prototipo, es decir, no El atributo de prototipo
4, llamar, aplicar y vincular no puede cambiar este punto de la función de flecha, pero puede cambiar este punto de la función ordinaria
5, la función de flecha no tiene un objeto de argumentos, si hay una función externa, el argumento de la función externa se hereda, no La función externa informará un error, y la función de flecha usa el parámetro resto (la forma es: ... resto) 6. La función de flecha
no tiene un Generador y no se puede usar la palabra clave yield.
7. La función de flecha no tiene su propio
enlace a este texto original: https://blog.csdn.net/weixin_42178670/article/details/123966265
Con respecto al ejemplo real de este señalar el problema, este artículo lo ha presentado muy claramente.
Pregunta 15: Uso y principio de NextTick
1. nextTick es un método para esperar la próxima actualización de DOM
2. Vue tiene una estrategia de actualización asíncrona, lo que significa que si los datos cambian, Vue no actualizará el DOM inmediatamente, sino que abrirá una cola y guardará la función de actualización del componente en la cola.Todos los cambios de datos que ocurren en el mismo ciclo de eventos serán actualizaciones por lotes asincrónicas. Esta estrategia hace que nuestra modificación de los datos no se refleje inmediatamente en el DOM. En este momento, si desea obtener el estado actualizado del DOM, debe usar nextTick
3. Durante el desarrollo, hay dos escenarios en los que usaremos nextTick
- Cuando quieras crear el DOM
- Obtenga el estado actualizado del DOM después de que cambien los datos de respuesta, como la altura actualizada de la lista esperada.