Open AlvinWang627 opened 2 months ago
<script setup lang="ts"> import { ref, watch } from 'vue' const count = ref(0) /** * Challenge 1: Watch once * Make sure the watch callback is only triggered once */ watch( count, () => { console.log('Only triggered once') }, { once: true } ) //The new watch option in vue3.4 [Once Watchers](https://vuejs.org/guide/essentials/watchers.html#once-watchers) count.value = 1 setTimeout(() => (count.value = 2)) /** * Challenges 2: Watch object * Make sure the watch callback is triggered */ const state = ref({ count: 0 }) watch( state, () => { console.log('The state.count updated') }, { deep: true } ) state.value.count = 2 /** * Challenge 3: Callback Flush Timing * Make sure visited the updated eleRef */ const eleRef = ref() const age = ref(2) watch( age, () => { console.log(eleRef.value) }, { flush: 'post' } ) age.value = 18 </script> <template> <div> <p> {{ count }} </p> <p ref="eleRef"> {{ age }} </p> </div> </template>