El constructor y el ciclo de vida que deben aprender todos los días.

Constructor

Cada aplicación Vue.js comienza creando una instancia raíz de Vue a través del constructor Vue:

 var vm = new Vue ({// opciones})

Una instancia de Vue es en realidad el Modelo ViewModel descrito en el modo MVVM, por lo que el nombre de la variable VM a menudo se usa en documentos.

Al instancias de Vue, debe pasar en un objeto de opción, que puede contener opciones como datos, plantillas, elementos de montaje, métodos, ganchos de ciclo de vida, etc. Todas las opciones se pueden ver en la documentación de la API.

El constructor VUE se puede extender para crear constructores de componentes reutilizables con opciones predefinidas:

 var myComponent = vue.extend ({// opciones de extensión}) // Todas las instancias de `myComponent` se crearán con opciones de extensión predefinidas var myComponentInstance = new MyComponent ()

Aunque las instancias de extensión se pueden crear de manera imperativa, en la mayoría de los casos el constructor de componentes se registra como un elemento personalizado y luego se usa declarativamente en la plantilla. Explicaremos el sistema de componentes en detalle más adelante. Ahora solo necesita saber que todos los componentes Vue.js son realmente instancias de Vue.

Propiedades y métodos

Cada instancia de Vue proxyará todas las propiedades en su objeto de datos:

 var data = {a: 1} var vm = new Vue ({data: data}) vm.a === data.a // -> true // Las propiedades de configuración también afectarán los datos originales vm.a = 2data.a // -> 2 // ... viceversa data.a = 3vm.a // -> 3

Tenga en cuenta que solo estos atributos proxy responden. Si se agrega una nueva propiedad a la instancia después de que se crea la instancia, no activa una actualización de vista. Discutiremos el sistema de respuesta en detalle más adelante.

Además de estos atributos de datos, las instancias VUE exponen algunos atributos y métodos de instancia útiles. Estas propiedades y métodos tienen prefijo $ para distinguir de los atributos de datos del proxy. Por ejemplo:

 var data = {a: 1} var vm = new Vue ({el: '#example', data: data}) vm. $ data === data // -> truevm. $ el === Document.getElementByid ('Ejemplo') // -> True // $ Watch es un método de instancia VM. se cambia})

Consulte la documentación de API para ver todas las propiedades y métodos de instancias.

Ciclo de vida de instancia

Una instancia de Vue tiene una serie de pasos de inicialización cuando se crea; por ejemplo, requiere establecer observaciones de datos, compilar plantillas y crear los enlaces de datos necesarios. En el proceso, también llamará a algunos ganchos de ciclo de vida, proporcionando una oportunidad de correr para la lógica personalizada. Por ejemplo, el gancho creado se llama después de que se crea la instancia:

 var vm = new Vue ({data: {a: 1}, creado: function () {// `this` señala la instancia vm console.log ('a is:' + this.a)}}) // ->" a: 1 "

También hay otros ganchos llamados en diferentes etapas del ciclo de vida de la instancia, como compilado, listo, destruido. Este gancho apunta a la instancia de Vue que lo llama. Algunos usuarios pueden preguntar si Vue.js tiene el concepto de "controlador". La respuesta es, no. La lógica personalizada del componente se puede dividir en estos ganchos.

Diagrama del ciclo de vida

La siguiente figura ilustra el ciclo de vida de la instancia. No necesita resolver todo de inmediato, pero ayudará en el futuro.

Este artículo ha sido compilado en el "Tutorial de aprendizaje de componentes front-end Vue.js", y todos son bienvenidos a aprender y leer.

Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.