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

【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.xdnf.cn/news/16776.html

相关文章:

  • Ⅹ—6.计算机二级综合题23---26套
  • 两个服务之间的大规模数据推送
  • TOGAF指南1
  • Thymeleaf 模板引擎原理
  • 网站QPS多少才算高并发
  • c++和python联合编程示例
  • 5-EP4CE10F17C8-引脚配置
  • MySQL 高并发下如何保证事务提交的绝对顺序?
  • 向量投影计算,举例说明
  • 幂等性校验(订单重复提交问题)
  • X2Doris是SelectDB可视化数据迁移工具,安装与部署使用手册,轻松进行大数据迁移
  • Spring AI MCP:解锁大模型应用开发新姿势
  • 关于继承的一些知识(C++)
  • 层次聚类:无需“猜”K值,如何让数据自己画出“家族图谱”?
  • 深度学习-梯度爆炸与梯度消失
  • 笔试——Day25
  • 深度解读 CSGHub:开源协议、核心功能与产品定位
  • Java:JWT 从原理到高频面试题解析
  • Agents-SDK智能体开发[2]之工具调用
  • Web开发-PHP应用TP框架MVC模型路由访问模版渲染安全写法版本漏洞
  • Mysql group by
  • 机器学习第二课之逻辑回归(二)LogisticRegression
  • 链表【各种题型+对应LeetCode习题练习】
  • 力扣-最大单词长度乘积
  • macOS卸载.net core 8.0
  • PL-0功能拓展及基于VSCode的IDE配置
  • uniapp无线(WIFI)运行调试APP(真机)
  • 脚本统计MongoDB集合表数据量
  • SSL 剥离漏洞
  • Java 日期时间处理:分类、用途与性能分析