【vue】创建响应式数据ref和reactive的区别

目录

1、所谓响应式数据

2、ref创建基本类型响应式数据

3、reactive创建对象类型响应式数据

4、ref定义对象类型响应式数据

5、总结:ref和reactive对比

6、补充:toRefs与toRef


1、所谓响应式数据

所谓响应式数据就是,在vue页面中,template标签内的数据是渲染在页面的数据,一般需要和script标签内的数据进行绑定,也就是说在script标签内会进行一些逻辑计算改变一些数据的值。那么如果不使用响应式数据,script标签内更改了数据的值,template渲染在页面的值是不会发生改变的。

2、ref创建基本类型响应式数据

注意这里是基本类型


看看数据的内容发生了什么变化:



3、reactive创建对象类型响应式数据


输出对象到控制台:


4、ref定义对象类型响应式数据

展现数据不变:



ref底层创建响应式数据时,底层还是使用reactive来创建的


5、总结:ref和reactive对比

1 )插件自动补充 . value

2 reactive重新分配对象,会失去响应式

给变量car重写分配一个对象:

解决办法:

修改后:

总结:

3 )如果是 ref 定义的响应式对象,要重写赋值对象的内容

使用建议:


6、补充:toRefs与toRef


如何变成响应式的解构:

结果:

对于toRefs取多个(对象),toRef是取单个

效果

相关推荐
小张成长计划..4 分钟前
前端7:综合案例--品优购项目(HTML+CSS)
前端·css·html
一个处女座的程序猿O(∩_∩)O20 分钟前
React 多组件状态管理:从组件状态到全局状态管理全面指南
前端·react.js·前端框架
鹏多多22 分钟前
用useTransition解决React性能卡顿问题+实战例子
前端·javascript·react.js
只愿云淡风清32 分钟前
ECharts地图数据压缩-ZigZag算法
前端·javascript·echarts
亿元程序员40 分钟前
都2025年了,还有面试问A*寻路的???
前端
Moment40 分钟前
Node.js v25.0.0 发布——性能、Web 标准与安全性全面升级 🚀🚀🚀
前端·javascript·后端
全职计算机毕业设计43 分钟前
基于微信小程序的运动康复中心预约系统的设计与实现(SpringBoot+Vue+Uniapp)
vue.js·spring boot·微信小程序
杨超越luckly1 小时前
HTML应用指南:利用POST请求获取中国一汽红旗门店位置信息
前端·arcgis·html·数据可视化·门店数据
专注前端30年1 小时前
【JavaScript】every 方法的详解与实战
开发语言·前端·javascript
速易达网络1 小时前
Java Web登录系统实现(不使用开发工具)
java·开发语言·前端