一、作用

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

二、特点

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

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

情况四：一个包含上述内容的数组的监听

<template>
    <div>
        <h1>找对象</h1>
        <h2>姓名： {{ person.name }}</h2> <br>
        <h2>年龄： {{ person.age }}</h2>  <br>
        <h2>第一台车： {{ person.car.car1 }}</h2>
        <h2>第二台车： {{ person.car.car2 }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeCar1">修改第一台车</button>
        <button @click="changeCar">修改所有车</button>
    </div>
    </template>
    
    <script setup lang="ts">
    //引入watch
    import { reactive, watch } from 'vue'
    let person = reactive({
        name: '胡歌',
        age: 25,
        car: {
            car1: '奔驰A6',
            car2: '宝马x5'
        }
    })
    //只修改person内部的name属性
    function changeName() {
        person.name = '彭于晏'
    }
    //修改第一台车
    function changeCar1 () {
        person.car.car1 = '小米su7'
    }
    //修改所有车
    function changeCar () {
        person.car =  {
            car1: '海豹',
            car2: '沃尔沃s90'
        }
    }
    //监听响应式对象的多个属性值

    watch([() => person.name, () => person.car], (newValue, oldValue)=> {
        console.log('换名字和换所有车被监听了',newValue, oldValue)
    }, {deep: true})

    </script>

此时，不管点击修改名字、修改第一台车或者修改所有车，watch都能监听到。

总结

如果想要监听某个响应式对象的多个属性值，则watch第一个参数写成数组形式，数组里面写成函数返回值的形式，控制台打印出来的newValue与oldValue也都是数组形成。