一、作用

监视数据的变化（和vue2中watch作用一致）

二、特点

vue3中的watch只能监视以下四种数据：

1. ref定义的数据
2. reactive定义的数据
3. 函数返回一个值（getter函数）
4. 一个包含上述内容的数组

情况二：监听reactive定义的对象类型的数据

<template>
    <div>
        <h1>找对象</h1>
        <h2>姓名： {{ person.name }}</h2> <br>
        <h2>年龄： {{ person.age }}</h2>  <br>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeAll">修改所有</button>
    </div>
    </template>
    
    <script setup lang="ts">
    //引入watch
    import { reactive, watch } from 'vue'
    let person = reactive({
        name: '胡歌',
        age: 25
    })
    //只修改person内部的name属性
    function changeName() {
        person.name = '彭于晏'
    }
    //只修改person内部的age属性
    function changeAge() {
        person.age = 18
    }
    //修改person本身
    function changeAll() {
        Object.assign(person, {
            name: '吴彦祖',
            age: 20
        })
    }
    //监听reactive定义的对象类型的数据，默认是开启深度监听的
    watch(person, (newValue, oldValue)=> {
        console.log('换对象被监听了',newValue, oldValue)
    })
    </script>

在控制台打印中可看出，我不管改对象的名字还是还是对象的年龄，还是整体都改了，watch都能监听到，即隐式创建了深度监听。