watch & watchEffect 해부

const{createApp,ref,watch,watchEffect}=Vue;
createApp({
  setup(){
    const threat=ref(5);
    const log=ref([]);
    watch(threat,(newVal,oldVal)=>{
      log.value.unshift(`[WATCH] ${oldVal}→${newVal} ${newVal>=8?'⚠ CRITICAL':'✓ OK'}`);
      if(log.value.length>5)log.value.pop();
    });
    watchEffect(()=>{
      if(threat.value>=10)log.value.unshift('[EFFECT] 최대 위협도 감지!');
    });
    return{threat,log};
  },
  template:`<div>
    <div style='margin-bottom:8px;font-size:11px;'>
      위협도: <input v-model.number='threat' type='range' min='1' max='10' style='vertical-align:middle;'> <span style='color:#10b981'>{{threat}}</span>
    </div>
    <div v-for='(l,i) in log' :key='i' style='font-size:10px;color:#555;margin-bottom:2px;'>{{l}}</div>
  </div>`
}).mount('#watch-out');