watch监视【ref】定义的【对象类型】数据

<script setup lang="ts">
import { ref, watch } from 'vue'

let person = ref({ name: '张三', age: 18 })
const changeName = () => {
  person.value.name += '='
}
const changeAge = () => {
  person.value.age += 1
}

const changePerson = () => {
  person.value = { name: '李四', age: 20 }
}

// watch的第一个参数是:被监视的数据
// watch的第二个参数是:监视的回调
// watch的第三个参数是:配置对象()

//监视，情况一：监视ref定义的对象类型的数据，监视的是对象的地址值
//如果执行changeName和changeAge方法不会触发该监听，只有执行changePerson触发该监听
watch(person, (newValue, oldValue) => {
  console.log('新旧值情况一', newValue, oldValue)
})

//监视，情况二：添加开启深度监视，可以监视对象内部属性的变化
//注意:若修改的是ref定义的对象中属性，newValue和oldValue 都是新值，因为他们是同一个对象
//若修改整个ref 定义的对象，newValue 是新值， oldValue是旧值，因为不是同一个对象了
watch(
  person,
  (newValue, oldValue) => {
    console.log('新旧值情况二', newValue, oldValue)
  },
  { deep: true }
)

//监视，情况三：immediate立即监视，作用是一开始就先执行一次监听
watch(
  person,
  (newValue, oldValue) => {
    console.log('新旧值情况三', newValue, oldValue)
  },
  { deep: true, immediate: true }
)
</script>

<template>
  <div>
    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>
<style scoped>
button {
  margin: 0 10px;
}
</style>