watch监视【reactive】定义的【对象类型】数据中的属性(对象类型)

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

let person = reactive({ name: '张三', age: 18, score: { math: 90, language: 80 } })
const changeName = () => {
  person.name += '='
}
const changeAge = () => {
  person.age += 1
}

const changeScoreMath = () => {
  person.score.math += 5
}
const changeScoreLanguage = () => {
  person.score.language += 10
}
const changeScore = () => {
  //使用这种方法是没有改变地址值(推荐必须使用这种方式)
  // Object.assign(person.score, { math: 10, language: 10 })

  //这种方法赋值会改变地址值（禁止使用这种）
  person.score = { math: 10, language: 10 }
}
const changePerson = () => {
  //使用这种方法是没有改变地址值(推荐必须使用这种方式)
  Object.assign(person, { name: '李四', age: 20, score: { math: 100, language: 100 } })

  //这种方法赋值会改变地址值（禁止使用这种）
  // person = { name: '李四', age: 20, score: { math: 100, language: 100 } }
}

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

//监视，情况一：监视【reactive】定义的对象类型数据中的某个属性，默认是开启深度监视的，并且是关闭不掉的
//1.若该属性值不是【对象类型】,需要写成函数形式
//2.若该属性值是依然
//注意：写函数形式要如果使用{}括号，需要返回值必须使用return,如果不使用{}括号，不需要加return,表示默认返回
// watch(
//   () => {
//     return person.name
//   },
//   (newValue, oldValue) => {
//     console.log('新旧值情况一', newValue, oldValue)
//   }
// )
//
// watch(
//   () => person.name,
//   (newValue, oldValue) => {
//     console.log('新旧值情况二', newValue, oldValue)
//   }
// )

//监视这样写这样是有坑的，当修改单独修改math和language监听正常，最好的方法是如果监听的reactive对象最后都使用函数形式
//person.score这样监听的是值是否发生变化，因为person.score = { math: 10, language: 10 }，这是变化了地址，所以监视不了，但是值是发生了变化
// 通过函数() => person.score处理就变成监视的是地址
watch(person.score, (newValue, oldValue) => {
  console.log('新旧值情况三', newValue, oldValue)
})

//推荐写这种形式，如果是reactive监听的是基础类型，可以不加深度监视，默认开启，如果是对象类型，需要手动开启深度监视
watch(
  () => person.score,
  (newValue, oldValue) => {
    console.log('新旧值情况四', newValue, oldValue)
  },
  { deep: true }
)
</script>

<template>
  <div>
    <h1>情况二：监视【reactive】定义的【对象类型】数据中的属性</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>数学：{{ person.score.math }}</h2>
    <h2>语文：{{ person.score.language }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeScoreMath">修改数学分数</button>
    <button @click="changeScoreLanguage">修改语文分数</button>
    <button @click="changeScore">修改分数</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>
<style scoped>
button {
  margin: 0 10px;
}
</style>