EmberJS - 组件生命周期

组件的生命周期包含三种根据渲染场景执行的方法。

初始渲染时

  • init
  • didReceiveAttrs
  • willRender
  • didInsertElement
  • didRender

重新渲染时

  • didUpdateAttrs
  • didReceiveAttrs
  • willUpdate
  • willRender
  • didUpdate
  • didRender

组件销毁时

  • willDestroyElement
  • willClearRender
  • didDestroyElement

下表列出了在组件中使用生命周期钩子的不同方式 −

S.No. 生命周期方式 &描述
1 使用 didUpdateAttrs 更改属性

当组件的属性发生更改并在重新渲染组件之前调用时,可以使用 didUpdateAttrs 钩子。

2 使用 didReceiveAttrs 的属性

didReceiveAttrs 钩子可以在 init 方法之后使用,并在组件的属性发生更改时调用更新。

3 带有 didInsertElement 的第三方库

您可以使用此钩子初始化第三方库并将其附加到 DOM 元素中。

4 使用 didRender 渲染的 DOM

模板渲染后,将调用 didRender 钩子来更新 DOM。

5 使用 willDestroyElement 进行分离和拆除

您可以通过触发 willDestroyElement 钩子从 DOM 中删除组件元素。

emberjs_component.html