W0407/vue3/project1/src/components/Demo12.vue

<template>
  <div>
    <h1>Demo12:watch监听reactive定义的引用数据类型</h1>
    <h2>我在{{ flower.month }}的{{ flower.city }}--{{flower.a.b }}</h2>
    <button @click="changeMonth">修改月份</button>
    <button @click="changeB">修改b</button>
    <button @click="changeFlower">修改整体</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue";
let flower = reactive({
  month: "六月",
  city: "哈尔滨",
    a:{
      b:1
    }
});
function changeB() {
  flower.a.b = 12;
}
function changeFlower() {
  // flower.value--;
  Object.assign(flower, {
    month: "八月",
    city: "北京"
  });
}
function changeMonth() {
  flower.month = "七月";
}
watch(
  flower,
  (newValue, oldValue) => {
    console.log(newValue, oldValue, "12");
  }
);
</script>

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