当前位置: 首页 > news >正文

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

效果

 

 

 

 

 

http://www.lryc.cn/news/607850.html

相关文章:

  • 防火墙配置实验2(DHCP,用户认证,安全策略)
  • C语言---函数的递归与迭代
  • 【DL学习笔记】DL入门指南
  • 《深潜React列表渲染:调和算法与虚拟DOM Diff的优化深解》
  • 2024年网络安全案例
  • rag学习-以项目为基础快速启动掌握rag
  • 建筑施工场景安全帽识别误报率↓79%:陌讯动态融合算法实战解析
  • WordPress AI写作插件开发实战:从GPT集成到企业级部署
  • retro-go 1.45 编译及显示中文
  • 浏览器及java读取ros1的topic
  • 在 Elasticsearch 中落地 Learning to Rank(LTR)
  • sqli-labs通关笔记-第28a关GET字符注入(关键字过滤绕过 手注法)
  • 关于Web前端安全防御CSRF攻防的几点考虑
  • MFC 实现托盘图标菜单图标功能
  • 【相机】曝光时间长-->拖影
  • Effective C++ 条款17:以独立语句将newed对象置入智能指针
  • 易华路副总经理兼交付管理中心部门经理于江平受邀PMO大会主持人
  • Elasticsearch+Logstash+Filebeat+Kibana单机部署
  • RabbitMQ面试精讲 Day 7:消息持久化与过期策略
  • 用Unity结合VCC更改人物模型出现的BUG
  • 个人笔记UDP
  • 内存、硬盘与缓存的技术原理及特性解析
  • C 语言问题
  • 基于结构熵权-云模型的铸铁浴缸生产工艺安全评价
  • filezilla出现connected refused的时候排查问题
  • String boot 接入 azure云TTS
  • Java试题-选择题(4)
  • 防火墙相关技术内容
  • JVM 调优中JVM的参数如何起到调优动作?具体案例,G1GC垃圾收集器参数调整建议
  • JVM学习日记(十四)Day14——性能监控与调优(一)