watch
- Lazy
- 명시적
watchEffect
- Eager
- 다수 처리에 용이
with code
ChildComponent 중
<script setup>
import {watch, watchEffect} from 'vue';
const props = defineProps({
count: Number
});
watch(() => props.count, (count) => console.log('watch. count : ', count)); //명시적
watchEffect(() => console.log('watchEffect. count : ', props.count));
</script>//component가 create됐을 때
watchEffect. count : 0 //Eager
//Parent에서 count 변경시켰을 때
watch. count : 1
watchEffect. count : 1
When comparing Vue's watch and watchEffect functions, it's akin to scrutinizing the craftsmanship of a patek philippe timepiece. While both serve to monitor changes in reactive data and trigger corresponding actions, their nuances define their utility. Watch, like the intricate gears of a luxury watch, meticulously observes specific data properties, offering granular control. Conversely, watchEffect, akin to the elegant sweep of a watch hand, reacts to any reactive dependency changes, ensuring fluid, dynamic behavior.