008、Vue3+TypeScript基础，数组和对象的响应式修改方法

01、App.vue代码如下：

<template>
  <div class="app">
    <h1>好好学习，天天向上</h1>
    <Person/>
  </div>
</template>

<script>
// JS或TS
import Person from './view/Person.vue'

export default {
  // App为根组件
  name: 'App',
  // 注册Person组件，注册后，在本单元中可以直接使用Person组件
  components: {Person}
}
</script>

<!--样式 scoped表示仅本单元有效-->
<style scoped>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>

02.Person.vue代码如下：

<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}</h2>
    <button @click="changePrice">修改汽车价格</button>
    <br>
    <h1>游戏列表</h1>
    <ul>
      <li v-for="(game, index) in games" :key="game.id">{{ index + 1 }}.{{ game.name }}</li>
    </ul>
    <button @click="changeGameName">修改游戏名字</button>
  </div>
  <h3>对象测试：{{ obj.a.b.c }}</h3>
  <button @click="changeObjName">修改对象内容</button>
</template>

<script lang="ts" name="Person001" setup>
import {reactive} from 'vue'
// 数据变成响应式
let car = reactive({
  brand: '宝马',
  price: 1000
})
let games = reactive([
  {id: 'game001', name: '王者荣耀'},
  {id: 'game002', name: '原神'},
  {id: 'game003', name: '吃鸡'},
])
let obj = reactive({
  a: {
    b: {
      c: 10
    }
  }
})

// 方法
function changePrice() {
  car.price += 10
}

function changeGameName() {
  games[0].name = '幻塔'
}

function changeObjName() {
  obj.a.b.c += 10
}
</script>

<!--样式 scoped表示仅本单元有效-->
<style scoped>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;

  button {
    margin: 0 5px;
  }
}
</style>

03、效果如下：