文章目录
- reactive简介
reactive简介
- 用法: let xx = reactive({xxx:“xxx”})
- 返回值: 一个
Proxy的对象，就是响应式对象 - 特别注意:
数组也属于对象范畴，所以也能使用reactive，使其变成响应式数据- reactive修改值时，不需要在值后写
.value
代码展示:
<div><div><span>游戏名:{{gameDetail.name}}</span><span>版本号:{{gameDetail.version}}</span><span>大小:{{gameDetail.size}}</span></div><div><button @click="handleChangeGamesDetail">修改内容</button></div><div><ul><li v-for="(item,index) in games" :key="index"><div><span>游戏名:{{item.name}}</span><span>版本号:{{item.version}}</span><span>大小:{{item.size}}</span></div></li></ul></div><div><button @click="handleChangeGames">修改游戏</button></div></div>
</template>
<script setup lang="ts" name="item">
let gameDetail = reactive({name:"王者荣耀",version:"1.0",size:"1gb"})let games = reactive([{name:"王者荣耀",version:"1.0",size:"1gb"},{name:"星际争霸",version:"2.0",size:"2gb"},{name:"魔兽争霸",version:"3.0",size:"3gb"}])const handleChangeGamesDetail = ()=>{gameDetail.name = "远梦之星"}const handleChangeGames = ()=>{games[0].name = "修改游戏名"}</script>
