<!-- eslint-disable vue/multi-word-component-names -->

<script lang="ts" setup name="TheWelcome">
import { reactive, toRefs, toRef } from "vue";

// 创建一个响应式对象
const person = reactive({
  name: "张三",
  age: 18,
});

// 使用 `toRefs` 将响应式对象的属性转换为独立的响应式引用
// eslint-disable-next-line prefer-const
let { name, age } = toRefs(person);

// eslint-disable-next-line prefer-const
let rGreet = toRef(person, "age");

// 更改 rGreet
const onChangeGreet = () => {
  rGreet.value = 41;
};

function changeName() {
  // 修改名字，添加后缀 '~'
  name.value += "~";
}

function changeAge() {
  // 增加年龄
  age.value += 2;
}
</script>

<template>
  <div class="TheWelcome">
    <!-- 动态显示姓名和年龄 -->
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>

    <!-- 按钮触发相应的方法 -->
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <h2>toRef-greet: {{ rGreet }}</h2>
    <button @click="onChangeGreet">更换问候语</button>
  </div>
</template>

<style scoped>
/*
  .TheWelcome 类选择器，仅应用于当前组件内部的元素，
  因为使用了`scoped`属性，确保样式不会影响到其他组件
*/
.TheWelcome {
  background-color: skyblue; /* 设置背景颜色 */
  box-shadow: 0 0 10px; /* 添加阴影效果 */
  border-radius: 10px; /* 设置圆角半径 */
  padding: 20px; /* 设置内边距 */
}

/* 设置按钮之间的间距 */
button {
  margin: 0 5px;
}

/* 这个样式规则似乎没有用到，可以考虑移除或注释掉 */
li {
  font-size: 20px;
}
</style>
