【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>
相关推荐
kiramario3 分钟前
用IconContext.Provider修改react-icons的icon样式
前端·javascript·react.js
destinyol5 分钟前
React首页加载速度优化
前端·javascript·react.js·webpack·前端框架
程序员小续5 分钟前
React 多个 HOC 嵌套太深,会带来哪些隐患?
java·前端·javascript·vue.js·python·react.js·webpack
大猫会长32 分钟前
用AbortController取消事件绑定
前端
程序员小杰@1 小时前
AI前端组件库Ant DesIgn X
开发语言·前端·人工智能
致微1 小时前
Vue项目 bug 解决
前端·vue.js·bug
慕斯策划一场流浪2 小时前
fastGPT—nextjs—mongoose—团队管理之部门相关api接口实现
前端·javascript·html·fastgpt部门创建·fastgpt团队管理·fastgpt部门成员更新·fastgpt部门成员创建
我自纵横20233 小时前
事件处理程序
开发语言·前端·javascript·css·json·ecmascript
坊钰3 小时前
【MySQL 数据库】数据类型
java·开发语言·前端·数据库·学习·mysql·html
我是小路路呀3 小时前
css 文字换行每一个字渐变
前端·css