Aurelia - Cycle de vie des composants

Aurelia utilise des méthodes de cycle de vie des composants pour manipuler le cycle de vie des composants. Dans ce chapitre, nous allons vous montrer ces méthodes et expliquer le cycle de vie des composants.

• constructor()- La méthode constructeur est utilisée pour initialiser un objet créé avec une classe. Cette méthode est appelée en premier. Si vous ne spécifiez pas cette méthode, le constructeur par défaut sera utilisé.

• created(owningView, myView)- Ceci est appelé une fois que la vue et le modèle de vue sont créés et connectés au contrôleur. Cette méthode prend deux arguments. Le premier est la vue où le composant est déclaré(owningView). Le second est la vue des composants(myView).

• bind(bindingContext, overrideContext)- À ce stade, la liaison a commencé. Le premier argument représente le contexte de liaison du composant. Le second estoverrideContext. Cet argument est utilisé pour ajouter des propriétés contextuelles supplémentaires.

• attached() - La méthode attachée est appelée une fois que le composant est attaché au DOM.

• detached() - Cette méthode est opposée à attached. Il est appelé lorsque le composant est supprimé du DOM.

• unbind() - La dernière méthode du cycle de vie est unbind. Il est appelé lorsque le composant n'est pas lié.

Les méthodes de cycle de vie sont utiles lorsque vous souhaitez avoir un contrôle plus élevé sur votre composant. Vous pouvez les utiliser lorsque vous devez déclencher certaines fonctionnalités à un certain moment du cycle de vie des composants.

Toutes les méthodes de cycle de vie sont présentées ci-dessous.

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...
   }
}