detached
리소스 릭을 방지하기 위해 'detached' 라이프사이클 훅은 컴포넌트가 문서에서 제거 될 때 트리거됩니다. 이 단계에서 이벤트 리스너를 취소하거나 리소스를 해제하는 등의 정리 작업을 수행 할 수 있습니다.
예제 코드
<div id="logger">-</div>
<div style="color:red;">shadow html : <span id="shadowHtml"></span></div>
<script>
setTimeout(()=>{
const ele = document.createElement('test-ready');
setTimeout(()=>{
$('body').push(ele);
setTimeout(()=>{
$(ele).remove();
},500);
},500);
},500);
</script>
<div id="logger">-</div>
<div style="color:red;">shadow html : <span id="shadowHtml"></span></div>
<script>
setTimeout(()=>{
const ele = document.createElement('test-ready');
setTimeout(()=>{
$('body').push(ele);
setTimeout(()=>{
$(ele).remove();
},500);
},500);
},500);
</script>
<template component>
<div>test ready</div>
<script>
let count = 0;
export default {
tag: "test-ready",
ready(){
count++;
$("#logger").text = count;
$('#shadowHtml').text = this.shadow ? this.shadow.html : 'null';
},
attached(){
count++;
$("#logger").text = count;
},
detached(){
count++;
$("#logger").text = count;
}
};
</script>
</template>
생명주기 다이어그램
