src/watch.vue

<template>
  <h1>监听器</h1>
  <input type="text" v-model.lazy="msg">
  <p>{{ msg }}</p>

  <p>{{ obj.name }}</p>

  <p>{{ todoId }}</p>
  <p>{{ data.value }}</p>
</template>

<script setup lang="ts">
import { ref, computed, reactive, watch, onMounted, watchEffect, watchPostEffect } from 'vue'
const msg = ref('msg')
watch(msg, (newVal, oldVal) => {
    console.log('watch: ', newVal, oldVal)
  },
  { immediate: true }, // 立即触发回调函数
)

const obj = ref({
  name: 'hello world',
  age: 18,
})
watch(obj, (newVal, oldVal) => {
    console.log('watch obj: ', newVal, oldVal)
  },
  { deep: true }, // 深度监听，对象的属性变化也会触发回调函数
)
obj.value.name = 'hello vue'

onMounted(() => {
  console.log('onMounted' ,msg.value);
})

// 2
const todoId = ref(1)
const data = ref(null)
const unwatch = watchPostEffect(async () => {
  console.log('unwatch: ', data.value);
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
}, { once: true })
todoId.value = 2
</script>

<style scoped>
</style>