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

文章目录


ref对象类型简介

  • 用法: let xx = reactive({xxx:"xxx"})
  • 返回值: 一个Proxy的对象,就是响应式对象
  • 特别注意:
    • 既能定义对象类型,也能定义基本类型的响应式数据。但是ref底层还是需要reactive的proxy做响应式数据

代码展示:

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>

✨ 踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下

📃 个人主页: \textcolor{green}{个人主页:} 个人主页: 沉默小管

📃 个人网站: \textcolor{green}{个人网站:} 个人网站: 沉默小管

📃 个人导航网站: \textcolor{green}{个人导航网站:} 个人导航网站: 沉默小管导航网

📃 我的开源项目: \textcolor{green}{我的开源项目:} 我的开源项目: vueCms.cn

🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

如果有不懂可以留言,我看到了应该会回复

如有错误,请多多指教

相关推荐
abigale0316 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者35 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile39 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399741 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码