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

// 定义一个响应式的对象
const sum = reactive({
  name: '请问',
  age: 12
});

// 修改整个对象
function changePerson() {
  Object.assign(sum, {name: "马萨拉蒂", age: 10});
}

// 修改名称
function changeName() {
  sum.name = '而非';
}

// 增加年龄
function changeAge() {
  sum.age += 2;
}

// 情况三:监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
watch(sum, (newValue, oldValue) => {
  console.log('变化了', newValue, oldValue);
}, {deep: true, immediate: true});
</script>

<template>
  <div class="TheWelcome">
    <h1>情况一:监视【reactive】定义的【对象类型】数据</h1>
    <h2>姓名：{{ sum.name }}</h2>
    <h2>年龄：{{ sum.age }}</h2>
    <!-- 按钮触发不同的修改操作 -->
    <button @click="changeName">修改名称</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">直接修改全部</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;
}
</style>
