【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是取单个

效果

相关推荐
余防3 分钟前
CSRF跨站请求伪造
前端·安全·web安全·csrf
兮山与7 分钟前
前端2.0
前端
南风木兮丶14 分钟前
Vue 项目安装 @antfu/eslint-config 保姆级教程
前端·javascript·vue.js
万少27 分钟前
记 HarmonyOS 开发中的一个小事件 怒提华为工单
前端·harmonyos
未来之窗软件服务29 分钟前
万象EXCEL开发(六)excel单元格运算逻辑 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
mldong31 分钟前
保姆级教程!手把手教你搭建FastAPI + Vue3前后端分离项目
vue.js·python·全栈
Mintopia35 分钟前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium
Mintopia37 分钟前
🌩️ 云边协同架构下的 WebAI 动态资源调度技术
前端·javascript·aigc
Olrookie39 分钟前
若依前后端分离版学习笔记(十六)——scoped、路由跳转
前端·笔记
qaqxiaolei39 分钟前
高效办公利器:前端实现表格导出excel格式 + 自定义水印的完整方案
前端·javascript