w1020/15.vue3/vue_project1/src/components/Demo5.vue

<template>
  <div>
    <h2>第四个</h2>
    <p>{{ obj.name }}--{{ obj.age }}--{{ obj.love }}--{{ obj.car.a1 }}--{{
        obj.car.b1
      }}</p>
    <button @click="changeName">换个人</button>
  </div>
</template>
<script setup>
import { reactive } from 'vue';
let obj = reactive({
  name:"蜡笔小新",
  age: 3,
  love: '娜娜子',
  car: {
    a1: "a",
    b1: "b",
  },
})
console.log(obj)
function changeName() {
  // obj.age = 5;
  // obj.name = '阿呆'
  // obj.love = '女的'
  // obj = {
  //   name: '来财',
  //   age:10,
  //   love:'dollar'
  // }
  // Object.assign(obj,{
  //   name: '来财',
  //   age:10,
  //   love:'dollar',
  //   car:{
  //     a1:"9",
  //     b1:"4"
  //   }
  // })
  obj.car = {
    a1:"32",
    b1:"29"
  }
}
</script>
<style></style>