【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>
相关推荐
土了个豆子的15 分钟前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#
全栈技术负责人29 分钟前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
老华带你飞34 分钟前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
xw538 分钟前
移动端调试上篇
前端
伍哥的传说41 分钟前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入
@菜菜_达41 分钟前
Lodash方法总结
开发语言·前端·javascript
GISer_Jing1 小时前
低代码拖拽实现与bpmn-js详解
开发语言·javascript·低代码
YAY_tyy1 小时前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
Yvonne爱编码1 小时前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
在路上`1 小时前
前端学习之后端java小白(三)-sql外键约束一对多
java·前端·学习