<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>bb：{{ job.aa.bb }}</h2>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import { ref } from "vue";

export default {
  name: "App",
  setup() {
    let name = ref("张三");
    let job = ref({
      type: "前端工程师",
      salary: "30k",
      aa: {
        bb: "bb",
        cc: "cc",
      },
    });

    function changeInfo() {
      name.value = "李思";
      job.value.aa.bb = "dd";
    }

    return {
      name,
      job,
      changeInfo,
    };
  },
};
</script>