Una pregunta inicial de la entrevista todos los días

1. Pregunta: ¿Qué sucede cuando se usa new Vue()?

Al crear una nueva instancia de Vue en Vue.js, suceden las siguientes series de cosas:

1. Creación de una instancia de Vue: cree una nueva instancia de Vue a través del constructor de Vue. Por ejemplo:

   var vm = new Vue({
     // 选项
   });
   

2. Fusión de opciones: Vue fusionará el objeto de opciones pasado al constructor con las opciones predeterminadas de la instancia de Vue. Esto incluye datos, propiedades calculadas, métodos, enlaces de ciclo de vida, etc. La combinación de opciones garantiza que la instancia de Vue tenga la configuración correcta.

3. Capacidad de respuesta de los datos: Vue configurará el secuestro de datos en el objeto de datos para que se puedan rastrear los cambios en los datos. Esta es una de las características principales de Vue, que permite que la vista se actualice automáticamente a medida que cambian los datos.

4. Compilación de plantilla (opcional): si el atributo se proporciona en las opciones template, Vue compilará la plantilla en una función de representación. Esta función de representación se utiliza para representar datos en el DOM real.

5. Montaje DOM: si el atributo se proporciona en las opciones el, Vue montará el resultado de la función de representación en el elemento DOM especificado. De esta forma, la instancia de Vue controlará el elemento DOM y sus elementos secundarios.

6. Ganchos de ciclo de vida: las instancias de Vue tienen una serie de ganchos de ciclo de vida, como beforeCreate, created, beforeMountetc. mountedEstos enlaces se pueden utilizar para ejecutar lógica personalizada en diferentes etapas.

7. Escucha de eventos: las instancias de Vue pueden escuchar eventos DOM para responder a las interacciones del usuario.

8. Propiedades y observadores calculados: Vue le permite definir propiedades y observadores calculados para monitorear y responder a cambios en los datos.

9. Instrucciones e interpolación: Vue proporciona algunas instrucciones (como v-model,, etc.) y expresiones de interpolación (como ) v-bindpara vincular datos a elementos DOM o controlar la visualización y ocultación de DOM.v-if{ { message }}

10. Componentes: Vue admite el desarrollo basado en componentes, lo que le permite crear componentes reutilizables y anidarlos en instancias de Vue.

11. Enlace de datos: el enlace de datos es una de las funciones principales de Vue. Le permite vincular datos a elementos DOM en la plantilla, de modo que los cambios de datos actualicen automáticamente la vista. También admite el enlace de datos bidireccional.

12. DOM virtual: Vue utiliza DOM virtual para mejorar el rendimiento. Mantiene un árbol DOM virtual en la memoria para comparar y calcular los cambios en el DOM real, y luego solo actualiza las partes que realmente necesitan cambiar para reducir las operaciones del DOM.

En general, cuando crea una nueva instancia de Vue, Vue lo ayudará a crear una aplicación responsiva, lo que le permitirá administrar y manipular datos fácilmente, mientras actualiza automáticamente la vista, proporcionando muchas herramientas y funciones para simplificar el desarrollo front-end.