5 - watch 全家桶

[PengPeng-Qi]

/**
 * Challenge 1: Watch once
 * Make sure the watch callback only triggers once
 */
const unWatch = watch(
  count,
  () => {
    console.log('Only triggered once');
  },
  { immediate: true }
);

unWatch();

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.value, () => {
  console.log('The state.count updated');
});

state.value.count = 2;

/**
 * Challenge 3: Callback Flush Timing
 * Make sure visited the updated eleRef
 */

const eleRef = ref();
const age = ref(2);
watch(age, async () => {
  await nextTick();
  console.log(eleRef.value);
});
age.value = 18;

Vue SFC Playground