5 - watch family

[geek4ctrl]

// your answers

<script setup lang="ts"> import { ref, watch } from "vue" const count = ref(0) /** * Challenge 1: Watch once * Make sure the watch callback only triggers once */ watch(count, () => { console.log("Only triggered once") }, {once: true}) count.value = 1 setTimeout(() => count.value = 2) /** * Challenge 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>

{{ count }}

{{ age }}