【Vue3】reactive对象类型的响应式数据

文章目录


reactive简介

  • 用法: let xx = reactive({xxx:"xxx"})
  • 返回值: 一个Proxy的对象,就是响应式对象
  • 特别注意:
    • 数组也属于对象范畴,所以也能使用reactive,使其变成响应式数据
    • reactive修改值时,不需要在值后写.value

代码展示:

bash 复制代码
<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>
相关推荐
森叶24 分钟前
大前端开发——前端知识渐变分层讲解 & 利用金字塔原理简化前端知识体系
前端·webpack·electron
曹天骄25 分钟前
免费 Mock 图片 Mock 地址清单
javascript
源码集结号1 小时前
java智慧城管综合管理系统源码,前端框架:vue+element;后端框架:springboot;移动端:uniapp开发,技术前沿,可扩展性强
java·vue.js·spring boot·源代码·大数据分析·城管·电子办案
黄同学real1 小时前
常见的 CSS 知识点整理
前端·css
Nuyoah.1 小时前
《Vue3学习手记7》
javascript·vue.js·学习
oMMh2 小时前
使用C# ASP.NET创建一个可以由服务端推送信息至客户端的WEB应用(1)
前端·c#·asp.net
Huazzi.2 小时前
打造惊艳的渐变色下划线动画:CSS实现详解
前端·css
秋野酱2 小时前
基于Spring Boot+Vue 网上书城管理系统设计与实现(源码+文档+部署讲解)
vue.js·spring boot·后端
北方之mini鱼2 小时前
使用Construct开发一个HTML5小游戏究竟需要多长时间?
前端·html·html5
佬乔2 小时前
JWT-验证
java·服务器·前端