<template>
  <div class="sum">
    <h1>情况五：监视上述的多个数据</h1>
    <h2>姓名：{{ sum.name }}</h2>
    <h2>年龄：{{ sum.age }}</h2>
    <h2>汽车：{{ sum.car.c1 }}、{{ sum.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

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

  // 数据
  // eslint-disable-next-line prefer-const
  let sum = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    sum.name += '~'
  }
  function changeAge(){
    sum.age += 1
  }
  function changeC1(){
    sum.car.c1 = '奥迪'
  }
  function changeC2(){
    sum.car.c2 = '大众'
  }
  function changeCar(){
    sum.car = {c1:'雅迪',c2:'爱玛'}
  }

  // 监视，情况五：监视上述的多个数据
  watch([()=>sum.name,sum.car],(newValue,oldValue)=>{
    console.log('sum.car变化了',newValue,oldValue)
  },{deep:true})

</script>

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

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