Lifecycle Callbacks

ลำดับการทำงานของ Lifecycle

Web Components มี lifecycle callbacks 4 ตัวที่ browser จะเรียกใช้งานโดยอัตโนมัติในช่วงเวลาต่าง ๆ ของการทำงาน ทำให้คุณสามารถเชื่อมต่อกับจุดสำคัญต่าง ๆ ในชีวิตของ element ได้ แผนภาพด้านล่างแสดงลำดับทั่วไปของ lifecycle callbacks:

flowchart LR
  C["constructor
(element created)"]
  CC["connectedCallback
(inserted into DOM)"]
  AC["attributeChangedCallback
(attribute changed)
— fires each time —"]
  DC["disconnectedCallback
(removed from DOM)"]
  C --> CC
  CC --> AC
  AC --> AC
  CC --> DC

Web Component Lifecycle Timeline

Callback	เมื่อไหร่ที่ถูกเรียก
`constructor`	เมื่อสร้าง instance ของ element ขึ้นมาใหม่
`connectedCallback`	เมื่อ element ถูกแทรกเข้าไปใน DOM
`attributeChangedCallback`	เมื่อ attribute ที่ถูก observe มีการเปลี่ยนแปลง
`disconnectedCallback`	เมื่อ element ถูกนำออกจาก DOM

attributeChangedCallback อาจถูกเรียกได้หลายครั้ง — ครั้งละหนึ่ง attribute ที่เปลี่ยน — และอาจถูกเรียกทั้งก่อนและหลัง element เชื่อมต่อ ขึ้นอยู่กับว่า attribute ถูกตั้งค่าตอนไหน

constructor

constructor จะถูกเรียกเมื่อสร้าง instance ของ element ขึ้นมาใหม่ ไม่ว่าจะผ่านทาง document.createElement หรือ parser ของ browser ก็ตาม กฎสำคัญคือต้องเรียก super() เป็น statement แรกเสมอ และห้ามแตะ DOM, attribute หรือ children ในขั้นตอนนี้

connectedCallback

connectedCallback จะถูกเรียกทุกครั้งที่ element ถูกแทรกเข้าไปใน document ที่เชื่อมต่ออยู่ นี่คือจุดที่เหมาะสมสำหรับการ render และการตั้งค่า event listener

attributeChangedCallback

attributeChangedCallback จะถูกเรียกเมื่อ attribute ที่อยู่ใน observedAttributes มีการเพิ่ม, เปลี่ยนแปลง หรือลบออก คุณต้องระบุรายการ attribute ที่ต้องการ observe ด้วย static getter ชื่อ observedAttributes

disconnectedCallback

disconnectedCallback จะถูกเรียกเมื่อ element ถูกนำออกจาก DOM ใช้สำหรับทำความสะอาด เช่น การลบ event listener หรือยกเลิก timer

การอัปเกรด element ที่มีอยู่แล้ว

ถ้า browser พบ <my-widget> ใน HTML ก่อนที่ class จะถูกลงทะเบียน มันจะสร้าง HTMLElement ธรรมดาขึ้นมาก่อน เมื่อมีการเรียก customElements.define('my-widget', MyWidget) ในภายหลัง browser จะ อัปเกรด element เหล่านั้นโดยรัน constructor ของมัน และถ้า element นั้นอยู่ใน DOM แล้วก็จะรัน connectedCallback ด้วย คุณสามารถรอการอัปเกรดได้ด้วย customElements.whenDefined('my-widget')

ตัวอย่างที่รันได้จริง

element ด้านล่างจะบันทึก lifecycle event ทุกตัวที่มันสังเกตเห็น คลิก Remove element เพื่อสั่งให้ disconnectedCallback ทำงาน แล้วเพิ่มกลับเข้าไปใหม่เพื่อดู connectedCallback ทำงานอีกครั้ง

<div id="log" style="font-family:monospace;font-size:.85rem;background:#f3f4f6;padding:.5rem;border-radius:4px;margin-bottom:.5rem;min-height:2rem"></div><lifecycle-demo style="display:block;padding:.5rem;border:2px solid #6366f1;border-radius:4px;margin-bottom:.5rem"></lifecycle-demo><button id="btn-remove" style="margin-right:.5rem">Remove element</button><button id="btn-add">Re-add element</button>