和vue2对比，也是语法上稍有不同。
监听单个数据对象
<script setup>
import {ref, watch} from "vue";
const count = ref(100)
// 语法： watch(响应式数据对象, (newVal, oldVal) => { 业务处理... }
// 只监听单个数据
// watch(count, (newValue, oldValue) => {
// console.log(newValue, oldValue);
// })
同时监听多个数据对象
// 同时监听多个数据
const num = ref(88)
// watch([count, num], (newValue, oldValue) => {
// // 此时的newValue和oldValue是一个数组，newValue=[新的Count值, 新的Num值] oldValue=[原Count值, 原Num值]
// console.log(newValue, oldValue);
// })
// 此时可以使用es6的数据解构语法（类似python的拆包）
watch([count, num], ([newCount, newNum], [oldCount, oldNum]) => {
console.log(newCount, newNum, oldCount, oldNum)
})
监听对象类型数据中的某个值：
// 监听对象中的某个值
const obj = ref({
username: 'zhangsan',
age: 18
})
watch(() => obj.value.age, (newValue, oldValue) => {
console.log('obj中的age发生了改变：', newValue)
})
deep、immediate的使用
/**
* deep深度监听和immediate初始加载马上执行
* 这两个属性和vue2是一样的含义，不同的地方也是在于语法使用上.
*
* 具体为： 直接使用第三个参数，传递options对象。
*/
watch(obj, (newVal, oldVal) => {
console.log(newVal, oldVal);
}, {
deep: true,
immediate: true
})
