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

效果

相关推荐
小白64023 分钟前
2025年终总结-迷途漫漫,终有一归
前端·程序人生
烟花落o8 分钟前
贪吃蛇及相关知识点讲解
c语言·前端·游戏开发·贪吃蛇·编程学习
kgduu8 分钟前
js之javascript API
javascript
晚霞的不甘12 分钟前
Flutter for OpenHarmony专注与习惯的完美融合: 打造你的高效生活助手
前端·数据库·经验分享·flutter·前端框架·生活
BYSJMG18 分钟前
计算机毕设选题推荐:基于大数据的癌症数据分析与可视化系统
大数据·vue.js·python·数据挖掘·数据分析·课程设计
kogorou0105-bit22 分钟前
前端设计模式:发布订阅与依赖倒置的解耦之道
前端·设计模式·面试·状态模式
止观止39 分钟前
像三元表达式一样写类型?深入理解 TS 条件类型与 `infer` 推断
前端·typescript
xiaoqi9221 小时前
React Native鸿蒙跨平台实现图片画廊类页面是视觉展示型APP(如摄影类、图库类、设计类APP)的核心载体,其核心需求是实现图片的流畅渲染
javascript·react native·react.js·ecmascript·harmonyos
chenhdowue1 小时前
vue3甘特图 vxe-gantt 行内显示子任务,拆分任务展示同时可拖拽调整任务日期
vue.js·甘特图·vxe-gantt
雪芽蓝域zzs1 小时前
uniapp 省市区三级联动
前端·javascript·uni-app