元件有許多生命週期方法，可用於瞭解元件何時“將”和“執行”載入、更新和呈現。可以將這些方法新增到元件中，以便在正確的時間掛接到操作中。

在元件類中實現以下方法之一，Stencil 將以正確的順序自動呼叫它們：

單元件的生命週期

import { Component, Host, h, Prop, Watch } from '@stencil/core';

@Component({
  tag: 'web-text',
  styleUrl: 'web-text.css',
  shadow: true,
})
export class WebText {
  @Prop() text: string;

  @Watch('text')
  handlerTextWatcher(val: string, oldVal: string) {
    console.log('新值：', val, '，舊值：', oldVal);
    console.log('生命週期：watch');
  }

  connectedCallback() {
    console.log('生命週期：connectedCallback');
  }

  componentWillLoad() {
    console.log('生命週期：componentWillLoad');
  }

  componentWillRender() {
    console.log('生命週期：componentWillRender');
  }

  render() {
    console.log('生命週期：render');
    return <Host>{this.text}</Host>;
  }

  componentDidRender() {
    console.log('生命週期：componentDidRender');
  }

  componentDidLoad() {
    console.log('生命週期：componentDidLoad');
  }

  componentShouldUpdate() {
    console.log('生命週期：componentShouldUpdate');
  }

  componentWillUpdate() {
    console.log('生命週期：componentWillUpdate');
  }

  componentDidUpdate() {
    console.log('生命週期：componentDidUpdate');
  }

  disconnectedCallback() {
    console.log('生命週期：disconnectedCallback');
  }
}
 

未更改Prop text時console輸入的結果

更改Prop text後console輸出的結果

具體的生命圖示如下（源自官方網站）

更多生命週期相關的細節請參考官方網站

如果要更改Prop和State的值，建議在componentWill開頭的生命週期中去更改，因為帶will的生命週期會在元件渲染前執行，在did生命週期內區修改Prop和State的值，有可能會造成死迴圈；如果必須在did生命週期內區修改Prop和State的值，請一定要做好前置判斷

巢狀元件的生命週期

<component-a> 
    <component-b> 
        <component-c></component-c> 
    </component-b> 
</component-a>
 

1. component-a - componentWillLoad()
2. component-b - componentWillLoad()
3. component-c - componentWillLoad()
4. component-c - componentDidLoad()
5. component-b - componentDidLoad()
6. component-a - componentDidLoad()

結束語

在上一篇中)我們講解了如何使用stemcil-cli
搭建元件庫的方式；那麼經過本篇的講解，我們已經瞭解了其元件的生命週期；下一篇將講解stenciljs的相關裝飾器。