【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来进行定义。

相关推荐
yume_sibai10 分钟前
02-Flutter进阶开发
前端·flutter
a11177632 分钟前
莱茵生命终端 网页 html
前端·开源
水月清辉1 小时前
CSS 常用语法详解
前端·css
梨涡泥窝2 小时前
JavaWeb——基于 Spring Boot + Vue 的图书管理系统的设计与实现
vue.js·spring boot·后端
Eric_见嘉2 小时前
打开这个 VSC 设置「组件引用位置」和数量就都清楚了
前端·typescript·visual studio code
李高钢2 小时前
Python Tornado 框架入门:从零搭建你的第一个异步 Web 应用
前端·python·tornado
宁风2 小时前
JavaScript:函数体系-1
前端·javascript
mmsx2 小时前
Android 手簿 ADB 无线调试全攻略:USB 转 WiFi 一键连接
android·前端
guwentian2 小时前
Rolldown vs esbuild vs Webpack:Rust 打包器大战我们该怎么选
前端·webpack·rust·esbuild
特立独行的猫A2 小时前
用纯 Rust 重写 Podcastfy:把网页、PDF 和一段文字,变成一档双人对话播客
前端