47 preguntas básicas de la entrevista de VueJS (con respuestas)

El marco MVVM es un marco modelo-vista-modelo de vista, donde el modelo de vista conecta el modelo y la vista.

En escenarios donde hay muchas operaciones de datos, el marco MVVM es más adecuado y ayuda a representar la página manipulando los datos.

2. ¿Qué componente es el nivel de actividad?

Es una propiedad del componente router link del módulo vue router.

3. ¿Cómo definir el enrutamiento dinámico de Vue-router?

Agregue dos puntos antes del nombre de la ruta estática, por ejemplo, establezca el parámetro de ruta dinámica id y establezca /:id para el atributo de ruta del objeto de ruta.

4. ¿Cómo obtener los parámetros dinámicos pasados?

En el componente, use el params.id del objeto $router, que es $route.params.id.

5. ¿Qué ganchos de navegación tiene vue-router?

Existen tres tipos.

El primero es el gancho de navegación global: router.beforeEach(hacia, desde, siguiente). La función es juzgar e interceptar antes de saltar.

El segundo es el gancho en el componente.

El tercero es enrutar los componentes exclusivos por separado.

6. ¿Qué es mint-ui? ¿Cómo usarlo?

Es una biblioteca de componentes front-end instalada con npm basada en Vue.js, y luego importa estilos y código JavaScript mediante importación. Vue.use(mintUi) se usa para importaciones globales y la importación {Toast} de 'mint-ui' se usa para importaciones locales en componentes individuales.

7. ¿Qué es el modelo V? ¿Qué hace?

V-model es una directiva en Vue. js, puede lograr un enlace de datos bidireccional.

8. ¿Cómo vincular eventos a etiquetas en Vue.js?

Hay dos formas de vincular eventos.

Primero, pasa el comando v-on.

En segundo lugar, a través de @ sintaxis sugar, ingrese @ click= doLog()/>.

9.¿Qué es vuex? ¿Cómo usarlo? ¿En qué escenario funcional se utiliza?

Vuex es el sistema de gestión estatal de Vue. marco js.

Para utilizar vuex, la tienda debe introducirse e inyectarse en el componente Vue.js. Se puede acceder al objeto de la tienda a través de $ostore dentro del componente.

Los escenarios de uso incluyen: en aplicaciones de una sola página, utilizadas para la comunicación entre componentes, como reproducción de música, gestión del estado de inicio de sesión, agregar al carrito de compras, etc.

10. ¿Cómo implementar instrucciones personalizadas? ¿Qué función de gancho tiene? ¿Cuáles son los otros parámetros de la función de gancho?

Los comandos personalizados incluyen los dos tipos siguientes.

Tiene las siguientes funciones de gancho.

Los parámetros de la función de gancho son los siguientes.

11. Nombra al menos cuatro instrucciones en vue.js y su uso.

Las instrucciones y el uso relevantes son los siguientes.

¿Qué es 12 y Vue-Router? ¿Cuáles son sus componentes?

Es un complemento de enrutamiento para vue.js y sus componentes incluyen router-link y router-vIew.

13. ¿Qué son los ganchos de navegación? ¿Cuáles son sus parámetros?

Los ganchos de navegación, también conocidos como guardias de navegación, se dividen en ganchos globales, ganchos exclusivos de ruta única y ganchos a nivel de componente.

Los enlaces globales incluyen beforeEach, before resolve (agregado en Vue 2.5.0) y afterEach.

El gancho exclusivo de una única ruta ya existe antes de la entrada.

Los enlaces a nivel de componente incluyen beforeRouteEnter y BeforeerouteUpdate (agregados en Vue 2.2).

Tienen los siguientes parámetros.

¿Cuál es el principio del enlace de datos bidireccional entre 14 y Vue.js?

Los pasos específicos son los siguientes.

(1) Recorra recursivamente los objetos de datos que se van a observar, incluidos los atributos de los objetos de subatributos, y establezca los métodos de características establecidas y obtenidas. Cuando asigna un valor a este objeto, activará el método de característica de conjunto vinculado para que pueda monitorear los cambios de datos.

(4)MVVM es la entrada al enlace de datos, integrando observadores, compiladores y observadores. Observer monitorea los cambios en los datos de su propio modelo y compila instrucciones de plantilla a través de Compile. Finalmente, Watcher se utiliza para construir un puente de comunicación entre el observador y el compilador, a fin de lograr el efecto de notificar las actualizaciones de la vista sobre los cambios de datos. Utilice interacciones de vista para cambiar el efecto del enlace bidireccional en los cambios actualizados del modelo de datos.

15, explique en detalle su comprensión del ciclo de vida de Vue.js

El * * * completo se divide en ocho etapas, es decir, antes de la creación, creación, antes de la carga y cargado, antes de la actualización, actualizado, antes de la destrucción y antes de la destrucción.

Cuando utilice la función keep-alive del componente, agregue los siguientes dos ciclos.

La versión Vue2.5.0 de Vue agrega un gancho de bucle: ErrorCaptured, que se llama cuando se detecta un error de un componente descendiente.

16. Describa el proceso funcional de encapsular componentes de Vue.

Los componentes pueden mejorar la eficiencia del desarrollo de todo el proyecto, abstraer la página en varios módulos relativamente independientes y resolver los problemas de baja eficiencia, difícil mantenimiento y reutilización en el desarrollo de proyectos tradicionales.

Utilice el método Vue.extend para crear componentes y utilice el método Vue.component para registrar componentes. Los componentes secundarios requieren datos y pueden recibir datos en accesorios. Sin embargo, después de que el componente secundario modifica los datos, si desea pasar los datos al componente principal, puede usar el método de emisión.

17. ¿Cómo conociste vuex?

Vuex puede entenderse como un modelo o marco de desarrollo. Es una extensión a nivel de datos de Vue. marco js. Los cambios en los componentes del controlador se gestionan centralmente a través del estado (fuente de datos). El estado de la aplicación está centralizado en el almacenamiento. La forma de cambiar el estado es cometer una mutación, que es una transacción sincrónica. La lógica asincrónica debe encapsularse en acciones.

¿Qué es 18 y Vue-loader? ¿Para qué se utiliza?

Es un cargador para análisis. vue y puede convertir plantillas/js/estilo en módulos JavaScript.

El propósito es que a través de vue-loader, JavaScript pueda escribir la sintaxis EMAScript 6, el estilo del estilo puede aplicar scss o menos y la plantilla puede agregar la sintaxis jade.

19. Indíquenos el uso de cada carpeta y archivo en el directorio src del proyecto vue.cli.

La carpeta Activos guarda recursos estáticos; los componentes almacenan componentes; el enrutador define configuraciones relacionadas con el enrutamiento; la vista es una vista. vue es el componente principal de la aplicación; Main.js es el archivo de entrada.

20. ¿Cómo utilizar componentes personalizados en Vue.cli? ¿Qué problemas has encontrado durante el uso?

Los pasos específicos son los siguientes.

(1) Cree un nuevo archivo de componente en el directorio del componente y el script debe exportar la interfaz pública.

(2) Importe las páginas requeridas (componentes).

(3) Inyecte el componente importado en el atributo de componentes del subcomponente de uejs.

(4) Utilice componentes personalizados en vistas de plantilla.

21, hable sobre su comprensión de la compilación de plantillas de vue.js

En resumen, primero conviértalo a AST (árbol de sintaxis abstracta), es decir, convierta la estructura gramatical del código fuente Resúmalo en una expresión de árbol, luego renderícelo a través de la función de renderizado y devuélvalo a VNODE (nodo DOM virtual de vue.js).

Los pasos específicos son los siguientes.

(1) Compile la plantilla en AST a través del compilador de compilación, donde compilar es el valor de retorno del compilador de creación y se utiliza para crear el compilador. Además, el compilador es responsable de fusionar opciones.

(2) AST obtendrá la función de renderizado a través de generar (el proceso de convertir AST en una cadena divertida de renderizado. El valor de retorno de renderizado es VNODE, que es el nodo DOM virtual de Vue). Js, que contiene nombres de etiquetas, nodos secundarios, texto, etc.

22. Hable sobre el patrón MVVM en Vue.js

El patrón MVVM es el patrón modelo-vista-modelo.

Vue. js se basa en datos. Vue.js crea instancias de objetos para vincular DOM y datos. Una vez vinculados, permanecen sincronizados con los datos y, cada vez que los datos cambian, también lo hace el DOM.

ViewModel es el núcleo de Vue.js y una instancia de vue.js creará una instancia de un elemento HTML, que puede ser un cuerpo o un elemento al que apunta un selector CSS.

Los oyentes DOM y el enlace de datos son las claves para lograr el enlace bidireccional. Los oyentes DOM escuchan los elementos DOM en todas las capas de vista de la página. Cuando se producen cambios, los datos en la capa del modelo cambiarán en consecuencia. El enlace de datos monitoreará los datos de la capa del modelo. Cuando los datos cambian, los elementos DOM de la capa de vista también cambiarán.

23. ¿Cuál es la diferencia entre la instrucción v-show y la instrucción v-if?

V-show y v-if son instrucciones de renderizado condicionales. La diferencia es que independientemente de si el valor de v-show es verdadero o falso, el elemento existirá en la página HTML solo cuando el valor de v-if sea verdadero, el elemento existirá en la página HTML; La directiva v-show se implementa modificando el valor del atributo de estilo del elemento.

24. ¿Cómo hacer que CSS funcione solo en el componente actual?

Cada componente de Vue.js puede definir su propio código CSS y JavaScript. Si desea que el CSS escrito en un componente funcione solo en el componente actual, simplemente agregue el atributo Scoped a la etiqueta Style, es decir.

25. ¿Cómo crear componentes vue.js?

En vue.js, los componentes deben registrarse antes de poder usarse. El código específico es el siguiente

26. ¿Cómo implementar el anidamiento de enrutamiento? ¿Cómo saltar a una página?

El anidamiento de rutas representa otros componentes en este componente, en lugar de que toda la página salte a la ubicación donde se representa el componente definido por la vista del enrutador. Para realizar un salto de página, debe representar la página en el componente raíz, que se puede configurar de la siguiente manera.

Primero, cree una instancia del componente raíz y defina el contenedor de representación del componente en el componente raíz. Luego, sigue la ruta. Al cambiar de ruta, cambia toda la página.

27. ¿Cuál es la función del atributo ref?

A veces, para acceder directamente a algunos elementos dentro del componente, se puede definir este atributo. En este punto, puede usarlo para acceder más rápido al elemento con el atributo ref configurado. Atributo $refs dentro del componente. Este es un elemento DOM nativo y debes usar la API DOM nativa para manipularlo, como el código siguiente.

Nota: En Ve2.0, el atributo ref reemplaza la función de la directiva v-el en Ve2.0.

28. ¿Qué es Vue? js?

El objetivo de Vue. js implementa el desarrollo de componentes de enlace de datos responsivos a través de la API más simple posible.

29. Describe algunas características de vue.js.

Vue.js tiene las siguientes características.

(1)Modo MVVM.

Cuando el modelo de datos cambia, la vista monitorea el cambio y sincroniza el cambio; cuando la vista cambia, el modelo de datos monitorea el cambio y sincroniza el cambio.

Hay varias ventajas al utilizar el patrón MVVM.

(2) Desarrollo de componentes

(3) Sistema de enseñanza

(4) Vue2.0 comienza a admitir DOM virtual.

Pero en Vue1.0, se operan elementos DOM reales en lugar de DOM virtual, lo que puede mejorar el rendimiento de representación de la página.

30. Describe las características de vue.js

Vue. js tiene las siguientes características.

31. ¿Cómo vincular eventos en vue.js?

El evento está vinculado al nombre del evento = "función de devolución de llamada del evento()" después de v-on a través de la sintaxis. El conjunto de parámetros () de la función de devolución de llamada de evento es opcional. Si hay un conjunto de parámetros (), los parámetros de la función de devolución de llamada del evento deben pasarse activamente y el objeto del evento debe pasar $event. Por supuesto, en este momento también se pueden pasar algunos otros datos personalizados. Si no se establecen parámetros, la función de devolución de llamada del evento tiene un parámetro predeterminado, que es el objeto del evento. La función de devolución de llamada del evento debe definirse en el atributo de métodos del componente y el alcance es Vue. js instanciar objeto. Por lo tanto, en los métodos, puede utilizar datos y métodos de Vue. A través de esto, js también puede vincular rápidamente eventos a través de @ sintaxis sugar, como @ nombre del evento = "función de devolución de llamada de evento ()".

32. Explique la función del componente.

Cuando se empaqueta un componente dinámico, las instancias de componentes inactivos se almacenan en caché en lugar de destruirse.

Stay Alive gt es un componente abstracto que no representa elementos DOM por sí mismo ni aparece en la cadena de componentes principal.

Cuando se conecta un componente se ejecutarán sus dos funciones de ciclo de vida, activación y desactivación.

33.¿Qué es axios? ¿Cómo usarlo?

Axios es un módulo utilizado para reemplazar el complemento vue-resource.js en vue2.0. Es un módulo que solicita el fondo.

Utilice npm para instalar axios para instalar axios. Según la especificación del módulo EMAScript de EMAScript 6, axios se importa mediante la palabra clave import y se agrega al prototipo de la clase vue.js, de modo que cada componente (incluido el objeto de creación de instancias de vue.js) heredará el objeto del método. Define métodos como obtener y publicar, y puede enviar solicitudes de obtención o publicación. La función de devolución de llamada registrada con éxito en el método then puede acceder directamente al objeto de creación de instancias del componente y almacenar los datos devueltos a través de la función de alcance de la función de flecha.

34. En axios, ¿cuáles son las operaciones al llamar a axios.post('api/user ')?

Cuando se llama al método de publicación, significa enviar una solicitud asincrónica de publicación.

35.¿Qué es el SARS? ¿Cómo instalarlo y usarlo en ue?

Sass es un lenguaje CSS precompilado. Los pasos de instalación y uso son los siguientes.

(1) Utilice npm para instalar cargadores (como sass-loader y css-loader).

(2) Configure el cargador sass en webpack.config.js

(3) Agregue el atributo lang a la etiqueta de estilo del componente, como lang="scss ".

36. ¿Cómo insertar imágenes en un bucle en Vue? js?

Insertar el atributo "src" generará un error de solicitud 404. Se debe utilizar el formato v-bind:src.

El código es el siguiente: