W260426/16.vue3/project1/src/components/Demo8.vue

<template>
  <div>
    <h1>Demo8</h1>
    <h2>{{ obj.name }}--{{ obj.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年级</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script setup>
// ref 定义引用数据类型
import { ref, watch } from "vue";
let obj = ref({
  name: "图图",
  age: 3,
});

function changeName() {
  obj.value.name = "孙悟空";
}
function changeAge() {
  obj.value.age = 30;
}
function changePerson() {
  obj.value = {
    name: "猪八戒1",
    age: 4,
  };
}
watch(
  obj.value,
  (newValue, oldValue) => {
    console.log("新值", newValue);
    console.log("旧值", oldValue);
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

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