colección de entrevistas vue

1. ¿Qué es MVVM?
MVVM es un acrónimo de Model-View-ViewModel. MVVM es una filosofía de diseño. La capa Modelo representa el modelo de datos, y la lógica empresarial de modificación y operación de datos también se puede definir en el Modelo; la Vista representa el componente de la interfaz de usuario, que es responsable de convertir el modelo de datos en una visualización de la interfaz de usuario, y el Modelo de vista es un objeto (puente) que sincroniza la Vista y el Modelo.
Bajo la arquitectura MVVM, no existe una conexión directa entre Vista y Modelo, sino interacción a través de ViewModel. La interacción entre Modelo y ViewModel es bidireccional, por lo que los cambios en los datos de la Vista se sincronizarán con el Modelo, mientras que los cambios en los datos del Modelo también se sincronizarán inmediatamente. reflejado en la Vista.
ViewModel conecta la capa de Vista y la capa de Modelo a través de un enlace de datos bidireccional, y la sincronización entre Vista y Modelo es completamente automática sin intervención humana, por lo que los desarrolladores solo deben prestar atención a la lógica empresarial y no necesitan manipular manualmente el DOM. Es necesario prestar atención a la sincronización del estado de los datos, y MVVM gestiona completamente el mantenimiento del estado de los datos complejos.
En segundo lugar, ¿la diferencia entre mvvm y mvc? ¿Cuál es la diferencia entre este y otros frameworks (jquery)? ¿Qué escenarios son adecuados?
De hecho, no hay mucha diferencia entre mvc y mvvm. Se trata de pensamiento de diseño. La razón principal es que el controlador en mvc ha evolucionado hasta convertirse en viewModel en mvvm. Mvvm resuelve principalmente una gran cantidad de operaciones DOM en mvc, lo que reduce el rendimiento de representación de la página, ralentiza la velocidad de carga y afecta la experiencia del usuario.
Diferencia: Vue se basa en datos y utiliza datos para mostrar la capa de vista en lugar de operaciones de nodo.
Escenario: El escenario con más operaciones de datos es más conveniente
3. ¿Cuáles son las ventajas de Vue?
· Bajo acoplamiento. La Vista (Vista) se puede cambiar y modificar independientemente del Modelo. Un Modelo de Vista se puede vincular a diferentes "Vistas". Cuando la Vista cambia, el Modelo puede permanecer sin cambios, y cuando el Modelo cambia, la Vista también puede permanecer sin cambios.
· Reutilizabilidad. Puede poner algo de lógica de vista en un ViewModel y permitir que muchas vistas reutilicen esta lógica de vista.
· Desarrollo independiente. Los desarrolladores pueden centrarse en la lógica empresarial y el desarrollo de datos (ViewModel), y los diseñadores pueden centrarse en el diseño de páginas.
· Comprobable. Las interfaces siempre han sido difíciles de probar, pero ahora se pueden escribir pruebas para ViewModel.
4. ¿Pasar valores entre componentes?
Pasar valores entre el componente principal y el componente secundario
El componente principal pasa el valor definido en la etiqueta: eg='data' El componente secundario data(){return {data:'egdata'}}
en el componente principal acepta datos props a través del método props: ['eg '] Después de agregar elementos en props, no hay necesidad de agregar variables en los datos Los
subcomponentes pasan datos a los componentes principales
Los subcomponentes pasan parámetros a través del método $emit Subcomponentes
:




en los componentes principales:




los subcomponentes pasan a los subcomponentes Data
Vue no tiene un método de transferencia directa de subparámetros, se recomienda combinar los subcomponentes que necesitan pasar datos en un solo componente. Si debe pasar parámetros de un niño a otro, puede pasarlos primero al componente principal y luego al componente secundario.
Para facilitar el desarrollo, Vue ha lanzado una herramienta de gestión de estado Vuex , que puede realizar fácilmente la transferencia de parámetros entre componentes
5. Salto entre rutas
Declarativo (salto de etiqueta) Programático (salto js)
1. Modifique directamente la dirección de enrutamiento en la barra de direcciones ②Realice el salto a través del enlace del enrutador


③A través de la programación js

6. ¿Cómo utilizar componentes personalizados en vue.cli? ¿Has encontrado algún problema?
· Paso 1: cree su archivo de componente en el directorio de componentes (como: indexPage.vue), el script debe exportar el valor predeterminado {} ·
Paso 2: importe en la página (componente) que debe usarse: importe indexPage desde '@ /components/indexPage.vue'
Paso 3: Inyecte en el atributo de componentes del subcomponente de vue, componentes:{indexPage}
Paso 4: Úselo en la vista de plantilla,
por ejemplo, llamado indexPage, cuando lo use index-page
7. ¿Cómo implementa vue la carga bajo demanda y la configuración del paquete web?
Webpack proporciona require.ensure() para lograr la carga bajo demanda. En el pasado, las rutas se importaban mediante importación, pero se cambiaban a una definición constante.
Método de importación sin carga de página bajo demanda: importar inicio desde '…/…/common/home.vue'
Método de importación de carga de página bajo demanda: const home = r => require.ensure( [], () => r (require ('.../.../common/home.vue')))
El método de carga diferida de ruta utilizado en la aplicación de música es:

const Recommend = (resolve) => {
    
    
  import(‘components/recommend/recommend‘).then((module) => {
    
    
    resolve(module)
  })
}
const Singer = (resolve) => {
    
    
  import(‘components/singer/singer‘).then((module) => {
    
    
    resolve(module)
  })
}

8. Entrevista relacionada con Vuex
(1) ¿Qué es vuex? ¿cómo utilizar? ¿Qué escenarios funcionales lo utilizan?
Gestión estatal en el marco vue. Introduzca store e inyecte en main.js. Cree un nuevo almacén de directorio,... exporte. Los escenarios incluyen: estado entre componentes en una aplicación de una sola página. Reproducción de música, estado de inicio de sesión, agregar al carrito de compras
main.js:

import store from ‘./store‘
new Vue({
    el:‘#app‘,
    store
})

(2) ¿Qué tipos de atributos tiene vuex?
Hay cinco tipos, a saber, Estado, Getter, Mutación, Acción, Módulo.
La característica de estado
A de vuex, Vuex es un almacén y muchos objetos se colocan en el almacén. El estado es donde se almacena la fuente de datos, correspondiente a los datos
B en el objeto Vue general, y los datos almacenados en el estado responden. El componente Vue lee datos de la tienda. Si los datos en la tienda cambian, los componentes que Dependiendo de estos datos, también se producirá la Actualización C.
Asigna el estado global y los captadores a la propiedad calculada del componente actual a través de mapState. La
característica del captador
A de vuex, los captadores pueden realizar operaciones de cálculo en el Estado, que es la propiedad calculada B de la Tienda.
Aunque en el componente las propiedades calculadas también se pueden usar internamente, los captadores se pueden reutilizar entre múltiples componentes.
C. Si un estado solo se usa en un componente, se pueden usar captadores.
La función de mutación de Vuex
La acción es similar a la mutación, la diferencia La razón es que la acción envía una mutación, en lugar de cambiar el estado directamente; la acción puede contener operaciones asincrónicas arbitrarias.
(3) ¿Qué problemas surgirán si no se utiliza Vuex?
· La mantenibilidad disminuirá, si desea modificar los datos, necesita mantener tres lugares;
· La legibilidad disminuirá, porque los datos en un componente no se pueden ver de dónde provienen en absoluto;
· Aumentar el acoplamiento, cargar y distribuir una gran cantidad número de componentes, aumentará considerablemente el acoplamiento. (Originalmente, Vue usaba Component para reducir el acoplamiento, pero ahora se usa así, lo que va en contra de la intención original de la componenteización).
9. Las similitudes y diferencias entre las instrucciones v-show y v-if
La instrucción v-show es modificar la propiedad CSS de visualización del elemento para mostrarlo u ocultarlo La
instrucción v-if es destruir y reconstruir directamente el DOM para hacer que el elemento se muestre y tenga efectos ocultos
10. Cómo hacer que CSS funcione solo en el
componente actual

  _// 注册_
  [Vue.component](http://vue.component/)(‘my-component‘, {
    
    
  	template: ‘<div>A custom component!</div>‘
  })

1. 3) Uso de componentes
   13. ¿Cuál es la función de la instrucción v-el?
   Proporcionar un elemento DOM que ya existe en la página como destino de montaje de la instancia de Vue. Puede ser un selector de CSS o una instancia de HTMLElement
   14. En pasos para usar complementos en Vue
   Utilice la sintaxis ES6 import... from... o el método CommonJS require() para importar complementos
   Utilice el método global Vue.use(plugin) para usar complementos, puede pasar un objeto de opción Vue.use( MyPlugin, { someOption: true })
   Si utiliza el complemento de carga diferida:

   Vue.use(VueLazyload, {
         
         
     loading: require(‘common/image/default.png‘)
   })
   

15. Enumere 3 funciones de enlace de ciclo de vida comúnmente utilizadas en Vue (ver blog)
creadas: Se llama después de que se haya creado la instancia. En este paso, la instancia ha completado la observación de datos, los cálculos de propiedades y métodos, y la devolución de llamada de eventos de observación/evento. Sin embargo, la fase de montaje aún no ha comenzado, $El\; atributo\; el\; no\; esvisibleactualmente\cdot montado\_\_\_\_\_\_:Este\; gancho\; se\; llama\; después\; de\; que\; elseareemplazadopor\; elvm.el\; recién\; creado\; y\; montado\; enla$ instancia. Si la instancia raíz monta un elemento dentro del documento, cuando se monta se llama vm.$eltambién\; está\; dentro\; del\; documento.\cdot activated\_:mantenerp\_-Se\; llama\; cuandose\; activauncomponenteen\; vivo.\ast \ast Dieciséis,activo\_\_\_\_-¿Laclase\; eselatributo\; de\; qué\; componente?\ast \ast vue-enrutadorparaelmóduloenrutador\_\_\_\_-componentede\; enlace.\ast \ast 17.\; Cómo\; definirvue-¿Enrutamiento\; dinámico\; delenrutadory\; cómo\; obtenerlosparámetros\; dinámicos\; pasados?\ast \ast Enelarchivoindex.jsbajoeldirectorioruter,agregue/\_\_\_\_\_\_\_:yod.Utiliceelparámetro.iddelobjetoenrutador.\_\_\_\_\_\_\_\_\ast \ast \mathrm{18,}vue-¿\; Qué\; tiposde\; ganchos\; de\; navegacióntieneel\; enrutador?(ver\; blog)\ast \ast Tres\; tipos,unoes\; el\; ganchodenavegaciónglobal:enrutador.antesdecadauno(to,de,\_\_next)\; ,\; función:juzgar\; e\; interceptar\; antes\; de\; saltar.El\; segundo\; tipo:\; ganchos\; en\; el\; componente;\; el\; tercer\; tipo:\; enrutamiento\; separado\; y\; componentes\; exclusivos\ast \ast 19.\; Preguntas\; de\; la\; entrevista\; relacionadas\; con\; el\; ciclo\; de\; vida\ast \ast \; Hay8\; etapasen\; total:\; antes/después\; dela\; creación\; ,\; antes/\; después\; de\; la\; carga,\; antes/\; después\; dela\; actualización\; y\; antes/\; después\; dela\; destrucción.\cdot Antes/después\; dela\; creación:enlaetapaanteriora\; la\; creación,elelementode\; montajeelylosdatosdel\; objeto\; dedatosdelainstanciade\; vuenoestándefinidosyaúnnose\; han\; inicializado.Enla\; etapadecreaciónd,el\; objeto\; de\; datosdatadelainstancia\; de\; vueexiste,peroelaún\; no\; existe.\cdot Antes\; /\; después\; dela\; carga:\; enlaetapaanterioral\; montaje,\; elel\; y\; los\; datosde\; la\; instancia\; de\; vueseinicializan,$ pero todavía son nodos dom virtuales antes del montaje y data.message no ha$sido$$reemplazado$$.$En la fase de montaje, la instancia de vue se monta y data.message se procesa correctamente.
· Antes/después de la actualización: cuando los datos cambian, se activarán los métodos beforeUpdate y actualizado.
· Antes/después de la destrucción: después de ejecutar el método de destrucción, el cambio de datos no activará la función periódica, lo que indica que la instancia de vue ha liberado el monitoreo de eventos y el enlace con dom en este momento, pero la estructura dom aún existe. ( 1)
¿Qué es el ciclo de vida de Vue
? Respuesta: El proceso desde la creación hasta la destrucción de una instancia de Vue es el ciclo de vida. Es decir, una serie de procesos desde el inicio de la creación, inicialización de datos, compilación de plantillas, montaje de Dom → renderizado, actualización → renderizado, descarga, etc., se denomina ciclo de vida de Vue.
(2) ¿Cuál es la función del ciclo de vida de vue?
Respuesta: Hay múltiples enlaces de eventos en su ciclo de vida, lo que nos facilita formar una buena lógica al controlar el proceso de toda la instancia de Vue.
(3) Qué ganchos se activarán en la carga de la primera página
Respuesta: Los ganchos beforeCreate, creado, antes de Montar y montado se activarán en la primera carga de la página
(4), el procesamiento DOM se ha completado en qué ciclo
Respuesta: La representación DOM ya se realiza en el modo montado.
(5) Describa brevemente qué escenarios son adecuados para cada ciclo
Respuesta: Algunos métodos de uso de los enlaces del ciclo de vida:
beforecreate: puede agregar un evento de carga aquí, que se activa cuando se carga la instancia
creada: el evento cuando se completa la inicialización es escrito aquí, como finalizar el evento de carga aquí, las solicitudes asincrónicas también son adecuadas para ser llamadas aquí
Montado: monte el elemento y obtenga el nodo DOM
Actualizado: si los datos se procesan de manera uniforme, escriba la función correspondiente aquí
BeforeDestroy: puede hacer un evento de parada de confirmación Cuadro de confirmación
· nextTick: ¿Operar dom
20 inmediatamente después de actualizar los datos, nombrar al menos 4 comandos en vue y su uso?
v-if: determinar si ocultar,
v-for: bucle de datos,
v-bind: clase: vincular un atributo,
v-model: realizar un enlace bidireccional
21. ¿Qué es vue-loader? ¿Cuáles son los usos que tiene?
Un cargador que analiza archivos .vue. (Consulte https://www.jb51.net/article/115480.htm para una comprensión más profunda )
Propósito: js puede escribir es6, el estilo puede ser scss o menos, la plantilla puede agregar jade, etc.
Según la definición de Sitio web oficial, vue-loader es webpack Un cargador para procesar archivos .vue.
En segundo lugar, utilizando el andamio vue-cli, el autor ya ha configurado la configuración básica, lista para usar y usándola, todo lo que necesita hacer es npm install para instalar las dependencias y luego puede desarrollar el código comercial.
22. ¿Qué es scss? ¿Cuáles son los pasos de instalación en vue.cli? ¿Cuáles son las características principales?
Respuesta: Precompilación de CSS. (scss es una versión mejorada de sass, que es totalmente compatible con las funciones anteriores de sass y tiene algunas capacidades nuevas. Lo más importante es que sass usa sangría para representar relaciones de anidamiento y scss son llaves). : Paso
1
: Primero instale los módulos del cargador como css-loader, node-loader y sass-loader
Paso 2: busque webpack.base.config.js en el directorio de compilación y agregue un extension.scss a la propiedad extends
Paso 3 : En el mismo archivo, configure un atributo de módulo
Paso 4: Agregue el atributo lang a la etiqueta de estilo del componente, por ejemplo: lang=”scss”
característica:
Se pueden usar variables, por ejemplo ($nombre de variable=valor);
Los mezcladores se pueden usar para mezclar en @mixin, pueden pasar variables
y pueden anidarse
　　　. Heredar @extend no puede pasar variables. El mismo estilo se hereda directamente sin causar redundancia de código; cuando la clase base no se hereda, también se compilará en css código
23. ¿Por qué utilizar la clave?
Al cambiar entre elementos con el mismo nombre de etiqueta, debe establecer un valor único a través del atributo clave para que Vue los distinga; de lo contrario, Vue solo reemplazará el contenido dentro de la misma etiqueta para mayor eficiencia.
24. ¿Por qué evitar usar v-if y v-for juntos?
Cuando Vue procesa instrucciones, v-for tiene mayor prioridad que v-if, lo que significa que v-if se ejecutará repetidamente en cada bucle v-for por separado. Pasar al elemento contenedor a través de v-if ya no iterará sobre cada valor de la lista. En cambio, solo lo comprobamos una vez y no evaluamos el v-for si el v-if es falso.
**25.¿Qué es VNode? ¿Qué es el DOM virtual? Para obtener más información, consulte https://www.jb51.net/article/105221.htm
Los nodos representados por Vue en la página y sus subnodos se denominan "Nodos virtuales (nodo virtual)", abreviado como "VNode". "Virtual DOM" es el nombre de todo el árbol VNode creado por el árbol de componentes de Vue.

Preguntas de la entrevista front-end de Vue 2018
1. ¿La clase activa es un atributo de qué componente? ¿Cómo definir el enrutamiento anidado?
Respuesta: El componente router-link del módulo vue-router.
El enrutamiento anidado, como su nombre lo indica, es un anidamiento de enrutamiento de múltiples capas. En la ruta de primer nivel, la matriz secundaria se utiliza para configurar la ruta secundaria, que es la ruta anidada.
** 2. ¿Cómo definir el enrutamiento dinámico de vue-router? ¿Cómo obtener los parámetros dinámicos pasados? **
Respuesta: En el archivo index.js en el directorio del enrutador, agregue /:id al atributo de ruta. Utilice el params.id del objeto enrutador
4. ¿Qué es scss? ¿Cuáles son los pasos para instalar y usar? ¿Cuáles son las características principales?
Respuesta: Preprocesar css, escribir la función actual de css, definir variables y anidar. Primero instale los módulos del cargador como css-loader, node-loader, sass-loader, etc., agregue una extensión al archivo de configuración webpack-base.config.js: extensión y agregue otro módulo: prueba, cargador ** 5 en el
módulo, ¿qué es mint-ui? ¿cómo utilizar? ¿Nombra al menos tres formas de utilizar los componentes?
Respuesta: Biblioteca de componentes front-end basada en Vue. Instalación de npm, luego importe estilo y js, introducción global de vue.use (mintUi). Introducir localmente en un solo componente: importar {Toast} desde 'mint-ui'. Componente 1: Toast('inicio de sesión exitoso'); Componente 2: mint-header; Componente 3: mint-swiper

6. ¿Qué es el modelo v? ¿cómo utilizar? ¿Cómo vinculan las etiquetas eventos en vue?
Respuesta: Se pueden realizar enlaces e instrucciones bidireccionales (v-class, v-for, v-if, v-show, v-on). El atributo de datos de la capa modelo de vue. Evento vinculante: <input @click=doLog() />

7. ¿Qué es axios? ¿cómo utilizar? Describa el proceso de usarlo para implementar la función de inicio de sesión.
Respuesta: Un módulo que solicita recursos en segundo plano. npm install axios -S está instalado y luego el envío es entre dominios, que debe configurarse en el archivo de configuración config/index.js. Si el fondo es Tp5, defina una ruta de recursos. Utilice import en js para ingresar y luego .get o .post. Si la devolución es exitosa en la función .then, la falla está en la función .catch
Vue.js 1.0 A menudo usamos vue-resource (biblioteca oficial ajax). Después del lanzamiento de Vue 2.0, el autor anunció que ya no lo hará. actualice vue-resource, recomiéndenos Use axios (cliente de solicitud HTTP basado en promesa, que se puede usar en navegadores y node.js al mismo tiempo) 8.
En axios + tp5 avanzado, ¿cuál es la operación de llamar a axios.post ( 'api/usuario')? ¿Qué pasa con axios.put('api/user/8')?
Respuesta: dominio cruzado, operación de agregar usuario, operación de actualización.
9. ¿Qué es una API RESTful? ¿Cómo usarlo?
Respuesta: Es una solicitud sin estado, estándar API. La dirección de enrutamiento de la solicitud es fija. Si es tp5, primero configure el enrutamiento de recursos en la configuración de enrutamiento. Los estándares son: .post .put .delete

10. ¿Qué es vuex? ¿cómo utilizar? ¿Qué escenarios funcionales lo utilizan?
Respuesta: Gestión estatal en el marco vue. Introduzca store e inyecte en main.js. Creó una nueva tienda de directorio,... exporta. Los escenarios incluyen: estado entre componentes en una aplicación de una sola página. Reproducción de música, estado de inicio de sesión, agregar al carrito

11. ¿Qué es el marco mvvm? ¿Cuál es la diferencia entre este y otros frameworks (jquery)? ¿Qué escenarios son adecuados? Respuesta: Hay dos diferencias entre
el marco modelo + vista + modelo de vista, el modelo de modelo de datos y la conexión de modelo de vista : Vue basado en datos, a través de los datos para mostrar la capa de vista en lugar de las operaciones de nodo. Escenarios: escenarios con más operaciones de datos, más convenientes

12. ¿Cuáles son los métodos de los comandos personalizados (v-check, v-focus)? ¿Qué funciones de gancho tiene? ¿Qué otros parámetros de la función de gancho?
Respuesta: Directiva de definición global: hay dos parámetros en el método de directiva del objeto Vue, uno es el nombre de la directiva y el otro es la función. Instrucciones definidas en componentes: directivas
Funciones de enlace: enlace (activado por eventos de enlace), insertado (activado cuando se insertan nodos), actualización (actualizaciones relacionadas dentro de los componentes)
Parámetros de la función de enlace: el, enlace
14, ¿qué es vue-router? ¿Qué componentes tiene?
Responder: Vue se utiliza para escribir un complemento para enrutamiento. enlace de enrutador, vista de enrutador

15. ¿Qué son los ganchos de navegación? ¿Qué parámetros tienen?
Respuesta: Los ganchos de navegación incluyen: ganchos a/globales y ganchos exclusivos dentro de los componentes. b/beforeRouteEnter, afterEnter, beforeRouterUpdate, beforeRouteLeave
parámetros: hay to (la ruta a ir), from (la ruta a salir), next (debe usar esta función para ir a la siguiente ruta, si no, interceptarla) el El más utilizado es este Varios.

16. ¿Cuál es el principio de enlace de datos bidireccional de Vue?
Respuesta: vue.js adopta el método de secuestro de datos combinado con el modo editor-suscriptor. Object.defineProperty () se usa para secuestrar el establecedor y el captador de cada propiedad, y publica un mensaje al suscriptor cuando los datos cambian, lo que activa el correspondiente seguimiento de devolución de llamada.
Pasos específicos:
Paso 1: se requiere un recorrido recursivo del objeto de datos observado , incluidos los atributos del objeto de subatributo, con setter y getter agregados
. Asignar un valor a este objeto activará el setter y luego podrá monitorear el segundo Paso de cambio de datos
: la compilación analiza las instrucciones de la plantilla , reemplaza las variables en la plantilla con datos, luego inicializa la vista de la página de representación, vincula el nodo correspondiente a cada instrucción con una función de actualización y agrega un suscriptor para monitorear los datos. los datos están disponibles Cambiar, recibir notificación, actualizar vista
Paso 3: Los suscriptores de Watcher son el puente de comunicación entre Observer y Compile . Las cosas principales que debe hacer son:
1. Agréguese al atributo suscriptor (dep) al crear una instancia de sí mismo
2. Debe tener un método update() en sí mismo
3. Cuando dep.notice() notifica el cambio de atributo, puede llamar a su propio método update() y activar la devolución de llamada vinculada en Compile, y luego será retirado.
Paso 4: MVVM se utiliza como entrada de enlace de datos, integra Observer, Compile y Watcher , monitorea los cambios de datos de su propio modelo a través de Observer, analiza y compila instrucciones de plantilla a través de Compile y, finalmente, usa Watcher para configurar la relación entre Observer y Compile. El puente de comunicación logra el efecto de enlace bidireccional de cambio de datos -> ver actualización; ver cambio de interacción (entrada) -> cambio de modelo de datos.
PD : La respuesta a la pregunta 16 también es adecuada para la pregunta de la entrevista "¿ Cómo se implementan los datos de Vue?"
18. Cuénteme sobre el proceso de encapsulación de componentes de vue.
R: En primer lugar, los componentes pueden mejorar la eficiencia del desarrollo de todo el proyecto. Puede abstraer la página en múltiples módulos relativamente independientes, lo que resuelve los problemas de nuestro desarrollo de proyectos tradicional: baja eficiencia , mantenimiento difícil y reutilización .
Luego, use el método Vue.extend para crear un componente y luego use el método Vue.component para registrar el componente. Los subcomponentes requieren datos, que pueden aceptar definiciones en accesorios. Después de que el componente secundario modifica los datos, quiere pasarlos al componente principal. Se puede utilizar el método de emisión.

19. ¿Cómo conociste vuex?
Respuesta: vuex puede entenderse como un modelo o marco de desarrollo. Por ejemplo, PHP tiene thinkphp, java tiene spring, etc.
Administre centralmente los cambios en los componentes de la unidad a través del estado (fuente de datos) (como el contenedor IOC de Spring para la administración centralizada de beans).
El estado a nivel de aplicación se concentra en la tienda; la forma de cambiar el estado es enviar mutaciones, lo cual es algo sincrónico; la lógica asincrónica debe encapsularse en la acción.
21. Por favor, dígame el uso de cada carpeta y archivo en el directorio src en el proyecto vue.cli.
Respuesta: La carpeta de activos es para recursos estáticos; componentes es para componentes; el enrutador es para definir la configuración relacionada con el enrutamiento; ver vista; app.vue es un componente principal de la aplicación; main.js es un archivo de entrada

22. ¿Cómo utilizar componentes personalizados en vue.cli? ¿Has encontrado algún problema?
Respuesta: Paso 1: cree su archivo de componente (smithButton.vue) en el directorio de componentes y el script debe exportar el valor predeterminado { Paso 2: importe en la página (componente) que necesita: importe smithButton desde '…/components/smithButton .vue ' Paso 3: Inyecte en el atributo de componentes del subcomponente de vue, componentes: {smithButton} Paso 4: Úselo en la vista de plantilla, el problema es: smithButton nombrado y smith-button cuando se usa.

23. ¿Habla sobre tu comprensión de la compilación de plantillas de Vue.js?
https://www.jianshu.com/p/e1669afa30b8
Respuesta: En resumen, primero se convierte en un árbol AST y luego la función renderizada devuelve VNode (el nodo DOM virtual de Vue)
Pasos detallados:
primero, a través del compilador Compile la plantilla en un árbol de sintaxis AST (el árbol de sintaxis abstracta es la representación en árbol de la estructura de sintaxis abstracta del código fuente), compilar es el valor de retorno de createCompiler y createCompiler se utiliza para crear un compilador. Además, la compilación también es responsable de fusionar opciones.
Luego, AST obtendrá la función de renderizado a través de generar (el proceso de convertir el árbol de sintaxis de AST en una cadena de función de renderizado). El valor de retorno de renderizado es VNode, que es el nodo DOM virtual de Vue, que contiene (nombre de etiqueta, hijo nodo, texto, etc. espera)

Desafío:
1. ¿Principio de respuesta de Vue? https://blog.csdn.net/GitChat/article/details/78516752
Mira esto https://blog.csdn.net/aaa333qwe/article/details/80093810


Hay un ab de datos, en el proceso de creación de instancias del objeto vue , Agregará métodos getter y setter a ayb a través del método defineProperty() de ES5, y vue.js compilará la plantilla, analizará y generará un objeto de instrucción, como la instrucción v-text, con cada objeto de instrucción se asociará un observador, cuando se evalúa el objeto de instrucción, se activará el captador y las dependencias se recopilarán en el observador; cuando el valor de ab se cambie nuevamente, se activará el método de establecimiento y se notificará al observador asociado correspondiente. y el observador evaluará ab nuevamente. Calculará y comparará los valores antiguos y nuevos. Cuando el valor cambie, el observador notificará al comando y llamará al método de actualización del comando. Dado que el comando es un paquete de DOM, llamará al Método DOM nativo para actualizar la vista.
2. ¿Cuál es el principio de implementación de vue-router?
https://www.cnblogs.com/yanze/p/7644631.html https://segmentfault.com/a/1190000015123061 3. ¿Por qué elegir vue? ¿Ventajas y desventajas en comparación con otros frameworks? (1) vue.js es más liviano, el tamaño después de gzip es solo 20K+, el tamaño después de React gzip es 44k y el tamaño después de Angular gzip es 56k, por lo que para terminales móviles, vue.js es más adecuado; (2) vue.js


Es más fácil de usar y tiene una curva de aprendizaje fluida, mientras que Angular es más difícil de comenzar y tiene más conceptos (como la inyección de dependencia). Está escrito en Java y muchas ideas siguen la tecnología básica. React necesita aprender más . cosas, y viene con un grupo de la familia de reacción,
(3) absorbe las fortalezas de los dos y toma prestadas instrucciones angulares (como v-show, v-hide correspondientes a angular ng-show, ng-hide) y reaccionar en componentes ( una página se extrae en un componente y el componente tiene un ciclo de vida completo)
(4) Vue también tiene sus propias características, como las propiedades calculadas

Principios de diseño de componentes
(1) Cada área visual/interactiva independiente de la página se considera un componente (como el encabezado, el final y los bloques reutilizables de la página)
(2) Cada componente corresponde a un directorio de proyecto, los diversos recursos se mantienen cerca en este directorio (la idea del mantenimiento cercano de los componentes encarna la idea de ingeniería front-end y proporciona una buena estrategia de divide y vencerás para el desarrollo front-end. En vue.js, el archivo .vue Las plantillas, js y estilos de los que dependen los componentes se escriben en un archivo)
(cada desarrollador conoce la unidad funcional desarrollada y mantenida, y su código debe existir en el directorio del componente correspondiente. En este directorio, usted Puede encontrar todos los componentes internos de la unidad funcional Lógica)
(3) Una página es solo un contenedor para componentes , y los componentes se pueden anidar y combinar libremente para formar una página completa.

Un breve resumen del algoritmo DOM virtual incluye varios pasos:
usar objetos JS para describir la estructura del árbol DOM y luego usar este árbol de descripción para construir un DOM real en la construcción inicial y mostrarlo en la página cuando
haya un cambio de estado de datos, reconstruya un nuevo árbol JS DOM, compare los cambios en el número de DOM entre el antiguo y el nuevo y registre la diferencia entre los dos árboles. Reconstruya el
DOM real a través del paso 1 de la diferencia correspondiente en el paso 2. Y vuelva a renderizarlo en la página, de modo que se complete la operación de todo el DOM virtual y se actualice la vista.