【Uniapp-Vue3】使用ref定义响应式数据变量

如果想要响应式的数据变量,不能直接定义,如下面这个例子:

我们直接定义了变量num1,使用定时器使他每一秒+1,我们理想的状态是num1的值为多少,插值表达式中的值就为多少。

但是我们会发现num1的值一直在改变,而页面上的差值表达式一直是num1的初值,没有我们想要的响应式的效果。

使用ref定义响应式变量

import {ref} from 'vue';

let 变量名 = ref(值);

我们只需要用ref对数据稍加修饰,就可以得到响应式的变量。

这里需要注意一下ref变量的值,如果我们输出num2,就会得到如下的对象:

因此我们在Script中想要对变量进行修改,应该用 变量名.value 的形式,而在差值表达式中不需要加上 .value ,这点很容易忘记。

此外,我们还可以使用ref去定义其他数据类型的变量:

不需要纠结哪些数据类型用ref,哪些数据类型用reactive,所有变量都可以使用ref来进行定义。

相关推荐
CappuccinoRose33 分钟前
模块化体系
前端·import·export·es modules
AIDANHANG41 分钟前
放开靠时间戳对日志前先核请求ID跨服务传播与采样关联
前端·人工智能
半生过往2 小时前
前端学 Java 课程笔记
java·前端·笔记
广州华水科技3 小时前
2026年单北斗GNSS变形监测系统推荐,破解水库安全监测难题
前端
独爱香菜4 小时前
Next.js 15 + Cloudflare Workers 实战:零中间件多语言 SEO 站点架构
前端
计算机魔术师4 小时前
DeepSeek、Qwen3比肩GPT-5,本地跑大模型的时代来了
前端
xcyxiner4 小时前
flutter wsl2安装记录(使用宿主机虚拟机)
前端·flutter
前端炒粉4 小时前
长会话虚拟滚动与渲染优化
前端·javascript·vue.js
宠友信息4 小时前
IM系统开发技术路线分析,即时通讯源码助力快速搭建聊天应用
java·spring boot·redis·websocket·mysql·uni-app·vue
花归去4 小时前
ant的a-table更改表格的高度
前端·javascript·html