如何在AngularJS中管理組件的生命周期鉤子

在AngularJS中，組件的生命周期是由一系列預(yù)定義的鉤子（hook）組成的

1. $onInit(): 當(dāng)組件初始化完成時(shí)調(diào)用。這是執(zhí)行初始化邏輯的最佳地方，例如設(shè)置默認(rèn)值或從服務(wù)器獲取數(shù)據(jù)。此鉤子在$controller注入之后調(diào)用。

angular.module('myApp').component('myComponent', {
  controller: MyController,
  template: '<div>My Component</div>',
  $onInit() {
    console.log('MyComponent initialized');
  }
});

2. $onChanges(changesObj): 當(dāng)組件的輸入屬性發(fā)生變化時(shí)調(diào)用。此鉤子接收一個(gè)包含所有變化屬性的對(duì)象。你可以在這里執(zhí)行依賴(lài)于輸入屬性變化的邏輯。

angular.module('myApp').component('myComponent', {
  controller: MyController,
  template: '<div>{{$ctrl.message}}</div>',
  bindings: {
    message: '<'
  },
  $onChanges(changesObj) {
    if (changesObj.message) {
      console.log('Message changed from', changesObj.message.previousValue, 'to', changesObj.message.currentValue);
    }
  }
});

3. $onDestroy(): 當(dāng)組件被銷(xiāo)毀時(shí)調(diào)用。這是執(zhí)行清理操作的好地方，例如取消事件監(jiān)聽(tīng)器或釋放資源。

angular.module('myApp').component('myComponent', {
  controller: MyController,
  template: '<div>My Component</div>',
  $onDestroy() {
    console.log('MyComponent destroyed');
  }
});

4. $doCheck(): 當(dāng)組件的輸入屬性或其子組件發(fā)生變化時(shí)調(diào)用。此鉤子通常用于執(zhí)行更細(xì)粒度的依賴(lài)跟蹤。它比$onChanges()更早被調(diào)用，但可能會(huì)在某些情況下導(dǎo)致性能問(wèn)題。因此，除非有特殊需求，否則建議避免使用此鉤子。

angular.module('myApp').component('myComponent', {
  controller: MyController,
  template: '<div>{{$ctrl.message}}</div>',
  bindings: {
    message: '<'
  },
  $doCheck() {
    console.log('Doing deep check');
  }
});

注意：在AngularJS 1.x中，組件的概念與其他框架（如React或Vue）中的組件概念略有不同。在AngularJS 1.x中，我們使用指令（directives）來(lái)實(shí)現(xiàn)類(lèi)似組件的功能。然而，上述生命周期鉤子同樣適用于AngularJS中的指令。