web250825/vue3/project3/src/components/Demo10.vue

<template>
  <div>
    <h1>Watch:监听ref引用数据类型</h1>
    <p>我在{{ obj.city }},现在是{{ obj.month }}</p>
    <button @click="changeCity">修改城市</button>
    <button @click="changeObj">修改整体</button>
  </div>
</template>

<script lang="ts" setup>
import {ref,watch} from "vue" 
let obj = ref({
    city:'哈尔滨',
    month:"8月"
})
function changeCity() {
    obj.value.city = '北京'
}
function changeObj() {
    obj.value = {
        city:"天津",
        month:'9月'
    }
}
// 1.watch监听ref引用数据类型 监听的是整体 而不是单独的
// 2.若监听ref引用数据类型中的属性 需要开启深度监听
watch(obj,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
},{
    deep:true,
    immediate: true
})
</script>

<style lang="scss" scoped>
</style>