web0715/15.vue3/project1/src/components/Demo11.vue

<template>
  <div>
    <h3>这是第十一个demo:watch:监听ref、reactive:引用数据类型中的某个属性</h3>
    <p>我叫{{person.name}},今年{{person.age}}岁</p>
    <p>我会{{person.weapon.weapon2}},我有{{person.weapon.weapon1}}</p>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeWeapon1">修改第一个</button>
    <button @click="changeWeapon2">修改第二个</button>
    <button @click="changeAll">修改整个武器</button>
  </div>
</template>

<script setup>
import { watch, reactive} from 'vue'

let person = reactive({
    name:"孙悟空",
    age:20,
    weapon:{
        weapon1:"金箍棒",
        weapon2:"七十二变"
    }
})
function changeName() {
    person.name = '猪八戒'
}
function changeAge() {
    person.age = 40
}
function changeWeapon1() {
    person.weapon.weapon1 = '九齿钉耙'
}
function changeWeapon2() {
    person.weapon.weapon2 = '三十六变'
}
function changeAll() {
    person.weapon = {
        weapon1:"画画",
        weapon2:"哈哈哈"
    }
}
// 监听响应式对象的某个属性 并且改属性是基本数据类型时 要写成函数式
watch(()=>person.name,(newValue,oldValue) => {
    console.log('改变了',newValue,oldValue)
})

// 监听响应式对象的某个属性 并且改属性是引用数据类型时 
// a.如果是单独写出 需要配合深度监听 可以分别监听属性
// b.如果是函数式 
// 1.添加深度监听 对象及属性全部可以监听到
// 2.不添加深读监听 只能监听到对象
watch(()=>person.weapon,(newValue,oldValue) => {
    console.log('改变了1',newValue,oldValue)
},{deep:true})

</script>
<style lang='scss' scoped>

</style>