VIP32/vue3/my_project/归档/1.setup+ref+reactive/Demo1.vue

<template>
  <div class="demo1">
    <h3>姓名：{{ name }}</h3>
    <h3>年龄：{{ age }}</h3>
    <h3>性别：{{ sex }}</h3>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeSex">修改性别</button>
  </div>
</template>

<script lang="ts">
export default {
  // 语法糖
  setup() {
    // setup语法中 不支持使用this
    let name = "孙悟空";
    let age = 18;
    let sex = "男";

    function changeName() {
      console.log("走进来");
      name = "猪八戒";
      console.log(name);
    }

    return {
      name,
      age,
      sex,
      changeName,
    };
  },
};
</script>

<style></style>