Aurelia - Жизненный цикл компонентов

Aurelia использует методы жизненного цикла компонентов для управления жизненным циклом компонентов. В этой главе мы покажем вам эти методы и объясним жизненный цикл компонента.

• constructor()- Метод конструктора используется для инициализации объекта, созданного с помощью класса. Этот метод вызывается первым. Если вы не укажете этот метод, будет использоваться конструктор по умолчанию.

• created(owningView, myView)- Это вызывается, когда представление и модель представления созданы и подключены к контроллеру. Этот метод принимает два аргумента. Первый - это представление, в котором объявлен компонент.(owningView). Второй - компонентный вид(myView).

• bind(bindingContext, overrideContext)- В этот момент началась привязка. Первый аргумент представляет контекст привязки компонента. Второй -overrideContext. Этот аргумент используется для добавления дополнительных контекстных свойств.

• attached() - Присоединенный метод вызывается после того, как компонент прикреплен к DOM.

• detached() - Этот метод противоположен attached. Он вызывается, когда компонент удаляется из DOM.

• unbind() - Последний метод жизненного цикла unbind. Он вызывается, когда компонент не привязан.

Методы жизненного цикла полезны, когда вы хотите иметь больший контроль над своим компонентом. Вы можете использовать их, когда вам нужно запустить некоторые функции в определенный момент жизненного цикла компонента.

Все методы жизненного цикла показаны ниже.

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