Aurelia - Ciclo de vida de los componentes

Aurelia utiliza métodos de ciclo de vida de los componentes para manipular el ciclo de vida de los componentes. En este capítulo, le mostraremos esos métodos y explicaremos el ciclo de vida de los componentes.

• constructor()- El método constructor se utiliza para inicializar un objeto creado con una clase. Este método se llama primero. Si no especifica este método, se utilizará el constructor predeterminado.

• created(owningView, myView)- Esto se llama una vez que la vista y el modelo de vista se crean y conectan al controlador. Este método toma dos argumentos. La primera es la vista donde se declara el componente(owningView). El segundo es la vista de componentes(myView).

• bind(bindingContext, overrideContext)- En este momento, el enlace ha comenzado. El primer argumento representa el contexto vinculante del componente. El segundo esoverrideContext. Este argumento se utiliza para agregar propiedades contextuales adicionales.

• attached() - El método adjunto se invoca una vez que el componente está adjunto al DOM.

• detached() - Este método es opuesto a attached. Se invoca cuando el componente se elimina del DOM.

• unbind() - El último método del ciclo de vida es unbind. Se llama cuando el componente no está vinculado.

Los métodos del ciclo de vida son útiles cuando desea tener un mayor control sobre su componente. Puede usarlos cuando necesite activar algunas funcionalidades en cierto punto del ciclo de vida del componente.

Todos los métodos del ciclo de vida se muestran a continuación.

app.js

export class App {
   constructor(argument) {
      // Create and initialize your class object here...
   }

   created(owningView, myView) {
      // Invoked once the component is created...
   }

   bind(bindingContext, overrideContext) {
      // Invoked once the databinding is activated...
   }

   attached(argument) {
      // Invoked once the component is attached to the DOM...
   }

   detached(argument) {
      // Invoked when component is detached from the dom
   }

   unbind(argument) {
      // Invoked when component is unbound...
   }
}