1. 作用

监视属性的变化，属性变化后，执行回调

2. 用法

① 监视一个源，传参是监视源与一个回调，回调参数是 一个新值 与 一个老值

<template>
    <input type="text" v-model="val">
</template>
    
<script setup lang="ts">
import { ref,watch } from 'vue'

let val = ref<string>("lzy")

watch(val, (newVal, oldVal)=>{
    console.log(newVal, oldVal)
})
</script>

② 监视多个源，传参是监视源数组与一个回调，回调参数是 新值组成的数组 与 老值组成的数组

<template>
    <input type="text" v-model="val1">
    <input type="text" v-model="val2">
</template>
    
<script setup lang="ts">
import { ref,watch } from 'vue'

let val1 = ref<string>("lzy")
let val2 = ref<string>("LZY")

watch([val1,val2], (newVal, oldVal)=>{
    console.log(newVal, oldVal)
})
</script>

③ 深度监视 ref 对象，需要第三个参数来配置

<template>
    <input type="text" v-model="val.name">
</template>
    
<script setup lang="ts">
import { ref,watch } from 'vue'

let val = ref({name: 'lzy', age: 18})

// 不起作用
// watch(val, (newVal, oldVal)=>{
//     console.log(newVal, oldVal)
// })

// 开启深度监视
watch(val, (newVal, oldVal) => {
    console.log(newVal, oldVal)  // 但是 新值 和 旧值 是一样的
}, {
    deep: true  // 开启深度监视
})
</script>

注意：如果是 reactive 对象，则 deep 默认为 true，默认深度监视

④ 只监听对象内部某个属性

<template>
    <input type="text" v-model="val.person.name">
    <input type="text" v-model="val.person.age">
</template>
    
<script setup lang="ts">
import { reactive, watch } from 'vue'

let val = reactive({
    person: {
        name: 'lzy',
        age: 18
    }
})


// 深度监视 - 注意第一个参数不能直接写对象属性，要写一个回调函数，返回的是想监视的对象属性
watch(() => val.person.name, (newVal, oldVal) => {
    console.log(newVal, oldVal)  // 可以看到，页面上 name 改变时会打印，而 age 改变时不会打印
})
</script>

3. watch 第三个参数的一些配置项

3.1 deep

true - 开启深度监视

3.2 immediate

true - 初始化后立即执行一次

3.3 flush

pre - 组件更新之前调用
sync - 同步执行
post - 组件更新之后调用