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

<template>
  <div>
    <p>
      我叫{{ obj.name }}今年{{ obj.age }}岁，我喜欢{{ obj.color.c1 }}和{{
        obj.color.c2
      }}
    </p>
    <button @click="changePart1">修改名字</button>
    <button @click="changePart2">修改整体</button>
    <button @click="changePart3">修改颜色一</button>
    <button @click="changePart4">修改整体颜色</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
let obj = reactive({
  name: "小明",
  age: 10,
  color: {
    c1: "红色",
    c2: "黄色",
  },
});
function changePart1() {
  obj.name = "图图";
}
function changePart2() {
  Object.assign(obj, {
    name: "小明1",
    age: 101,
    color: {
      c1: "红色1",
      c2: "黄色1",
    },
  });
}
function changePart3() {
  obj.color.c1 = "yellow";
}
function changePart4() {
  obj.color = {
    c1: "1",
    c2: "2",
  };
}
</script>

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