vue3中设置响应式对象和数组

<template>
    <div class="persion">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <h2>性别：{{ sex }}</h2>
        <button @click="nameTel">点击姓名</button>
        <button @click="ageTel">点击年龄</button>
        <button @click="showTel">点击显示电话</button>
        <li v-for="game in games" :key="game.id">{{ game.name }}</li>
        <button @click="games.push({id:'05',name:'和平三国'})">添加游戏</button>
        <button @click="updateGames">修改游戏</button>
 
        <h2>车名：{{ car.name }}</h2>
        <h2>价格：{{ car.price }}</h2>
        <button @click="carpricte">修改价格</button>
    </div>
</template>
<script lang="ts" setup name="Presion" >
import { ref } from 'vue';//针对一个数据变量
import { reactive } from 'vue';//针对数组，对象
 
 
let name = ref('张三');
        let age = ref(18);
let games = reactive([
        {id:'01',name:'王者农药'}, 
        {id:'02',name:'英雄联盟'},
        {id:'03',name:'和平精英'},
        {id:'04',name:'绝地求生'}
        ]);
let car = reactive({
            name:'奔驰',
            price:10000000,
        })
let sex = '男';
let tel = '13812345678';
     
function nameTel() {
            name.value = '李四';
            console.log(name);
        }
        //修改具体的参数，必须用value
        function ageTel() {
            age.value = age.value + 1;
        }
        function showTel() {
            alert(tel);
        }
        function updateGames() {
            games[0].name = '荒野求生';
        }
        //当需要同时修改多个对象时，用Object.assign（，，，）
        function carpricte() {
            Object.assign(car,{name:"宝马",price:"0"},games,games[0].name='荒野')
        }
 
</script>
<style>
.persion {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>