通过用 ref 定义基本类型的数据 你想哪个数据是响应式，就要把哪个数据包一下：
首先要导入 ：import {ref} from 'vue' ,然后通过name.value 获取值进行数据响应改变
// 导入
import {ref} from 'vue'let name = ref('张三')let age = ref(18)let tel = '13888888888'let address = ref('北京昌平区宏福苑·宏福科技园')// 方法function changeName() {name.value = 'zhang-san' //注意：这样修改name，页面是没有变化的console.log(name.value) //name确实改了，但name不是响应式的}function changeAge() {age.value += 1 //注意：这样修改age，页面是没有变化的console.log(age.value) //age确实改了，但age不是响应式的}通过 reactive 修改对象类型数据,必须使用 reactive 包起来 =>在vue 中 Proxy(Object) 就是响应数据
<h1>我的一个品牌 { {car.brand }}价格是：{ {car.price}}</h1>
<button @click="changePrice">修改这个品牌和价格</button>
<h2>游戏列表</h2>
<ul>
<li v-for="v in games" :key="v.id"> { { v.id +"=>"+ v.name}} </li>
</ul>
<button @click="changeGames">修改第一个游戏的名字</button>
<h3>显示对象的数据：{ { obj.a.b.c.d }}</h3>
<h3>显示对象的数字：{ { obj.a.b.d.e }}</h3>
<button @click="editChangeNum">修改对象里面的数字</button>
<script lang="ts" setup name = "Person">
import {reactive} from 'vue'
let car = reactive({brand:'奔驰',price:599})
console.log(car)
console.log(car.brand)
function changePrice(){
//car.brand = "宝马"
car.price += 10
}
let games = reactive([
{id:"001",name:"王者荣耀"},
{id:"002",name:"开卷有益"},
{id:"003",name:"王者归来"},
])
function changeGames(){
games[0].name = "修改第一个游戏的名字"
}
let obj = reactive({
a:{
b:{
c:{
d:"hello"
},
d:{
e:99
}
}
}
})
function editChangeNum(){
obj.a.b.d.e = 69998
}
</script>
