reactive对比ref

从定义数据角度对比

  • ref用来定义基本数据类型
  • reactive用于定义引用数据类型
  • 备注:ref也可以定义引用数据类型数据,它内部会自动通过reactive转为代理对象

从原理角度对比

  • ref通过Object.defineproperty()的get与set来实现响应式(数据劫持)。
  • reactive通过使用proxy来实现响应式(数据劫持),并通过reflect操作源对象内部的数据。

从使用角度对比

  • ref定义的数据:操作数据需要.value,读取数据时模板中直接读取
  • reactive定义的数据:操作数据与读取数据,均不需要.value
相关推荐
龙井>_<27 分钟前
vue3使用keep-alive缓存组件与踩坑日记
前端·vue.js·缓存
Captaincc1 小时前
OpenAI以API的形式发布了三 个新模型:GPT-4.1、GPT-4.1 mini 和 GPT-4.1 nano
前端·openai
A-Kamen2 小时前
Webpack vs Vite:深度对比与实战示例,如何选择最佳构建工具?
前端·webpack·node.js
codingandsleeping3 小时前
OPTIONS 预检请求
前端·网络协议·浏览器
程序饲养员4 小时前
ReactRouter7.5: NavLink 和 Link 的区别是什么?
前端·javascript·react.js
小小小小宇4 小时前
CSS 层叠上下文总结
前端
拉不动的猪4 小时前
设计模式之------命令模式
前端·javascript·面试
Json____4 小时前
springboot框架集成websocket依赖实现物联网设备、前端网页实时通信!
前端·spring boot·websocket·实时通信
uhakadotcom5 小时前
Bun vs Node.js:何时选择 Bun?
前端·javascript·面试
前端snow5 小时前
前端工程师看docker是什么?
前端·javascript·docker