Web1020/13.Vue3/project2/src/components/Demo2.vue

<template>
  <div>
    <h1>第二个demo</h1>
    <p>我叫{{ obj.name }},今年{{ obj.age }}了,是个{{ obj.sex }}孩</p>
    <button @click="changeName">修改名称</button>
    <button @click="changeAll">修改全部</button>
  </div>
</template>

<script name="Demo2" setup>
import { reactive } from "vue";
let obj = reactive({
  name: "图图",
  age: 3,
  sex: "男",
});
console.log(obj);
function changeName() {
  obj.name = "小红";
}
function changeAll() {
  // obj = reactive({
  //  name:"小明",
  //  age:5,
  //  sex:'女'
  // })
  // obj.name = "小红";
  // obj.age = 5;
  // obj.sex = "小红"
  Object.assign(obj, { name: "哆啦A梦", age: 7, sex: "男" });
}
</script>
<style lang="scss" scoped></style>