如何在AngularJS中管理组件的生命周期钩子

在AngularJS中，组件的生命周期是由一系列预定义的钩子（hook）组成的

1. $onInit(): 当组件初始化完成时调用。这是执行初始化逻辑的最佳地方，例如设置默认值或从服务器获取数据。此钩子在$controller注入之后调用。

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

2. $onChanges(changesObj): 当组件的输入属性发生变化时调用。此钩子接收一个包含所有变化属性的对象。你可以在这里执行依赖于输入属性变化的逻辑。

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(): 当组件被销毁时调用。这是执行清理操作的好地方，例如取消事件监听器或释放资源。

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

4. $doCheck(): 当组件的输入属性或其子组件发生变化时调用。此钩子通常用于执行更细粒度的依赖跟踪。它比$onChanges()更早被调用，但可能会在某些情况下导致性能问题。因此，除非有特殊需求，否则建议避免使用此钩子。

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）来实现类似组件的功能。然而，上述生命周期钩子同样适用于AngularJS中的指令。