Vue3 watch函数中的坑

<template><h1>当前n值为：{
   {n}}</h1><h1>当前求和为：{
   {sum}}</h1><button @click="sum++;n--">点我+1</button><h2>姓名：{
   {person.name}}</h2><h2>年龄：{
   {person.age}}</h2><h2>薪资：{
   {person.job.j1.salary}}k</h2><button @click="person.age++">点我加一岁</button><button @click="person.job.j1.salary++">点我涨薪</button>
</template><script>import {ref,reactive,watch} from 'vue'export default {name:'Demo',setup(){let sum = ref(0)let n = ref(0)let person = reactive({name:'张三',age:18,job:{j1:{salary:30}}})/*watch能传三个参数:第一个是监视的对象第二个是回调第三个是配置（immediate、deep）坑:直接监视reactive定义的响应式数据，则 oldValue 错误 且 #强制！开启深度监视监视reactive定义的响应式数据中的某个属性时，第一个参数不能用函数了监视reactive定义的响应式数据中的某些属性时，默认不开启深度监视，数组中的每个监视对象都得是函数凡是监视的对象是Object，oldValue都废*/// 情况一：监视单个ref所定义的响应式数据watch(sum,(v)=>{console.log('sum的值变了',v)})// 情况二：监视多个ref所定义的响应式数据watch([sum,n],(newV,oldV)=>{console.log(newV,oldV)})// 情况三：监视reactive所对应的响应式数据，全部watch(person,(n,o)=>{console.log(n,o)},{deep:false})  // 只要监视对象就无法正确获取oldValue,深度监视锁死(deep配置无效，默认开启)// 情况四：监视reactive所对应的响应式数据中的某个属性（值为对象）watch(person.job,(n,o)=>{console.log(n,o)})// 情况五：监视reactive所对应的响应式数据中的某些属性（值为对象）watch([()=>person.age,()=>person.job.j1],(n,o)=>{console.log(n,o)},{deep:true})  // 默认deep是falsereturn {sum,n,person}}}
</script>