watch
일단 ready 단계가 완료되면, 해당 watch 객체에 연결된 리스너 함수는 한 번 호출됩니다. 그 후, 데이터의 어떤 값이 변경되면 해당 키의 리스너 함수가 다시 호출됩니다.
예제 코드
<div id="logger">-</div>
<div style="color:red;">shadow html : <span id="shadowHtml"></span></div>
<script>
setTimeout(()=>{
const ele = document.createElement('test-ready');
},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');
},500);
</script>
<template component>
<div>test watch</div>
<script>
let count = 0;
export default {
tag: "test-ready",
data:{
val: "I am val"
},
watch:{
val(val){
count++;
$("#logger").text = count;
$("#shadowHtml").push(`<div>${val}</div>`);
}
},
ready(){
setTimeout(()=>{
this.val = 'change val';
},500);
}
};
</script>
</template>
생명주기 다이어그램
