reactive对比ref

从定义数据角度对比

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

从原理角度对比

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

从使用角度对比

  • ref定义的数据:操作数据需要.value,读取数据时模板中直接读取
  • reactive定义的数据:操作数据与读取数据,均不需要.value
相关推荐
高山我梦口香糖10 分钟前
[react] <NavLink>自带激活属性
前端·javascript·react.js
撸码到无法自拔15 分钟前
React:组件、状态与事件处理的完整指南
前端·javascript·react.js·前端框架·ecmascript
高山我梦口香糖15 分钟前
[react]不能将类型“string | undefined”分配给类型“To”。 不能将类型“undefined”分配给类型“To”
前端·javascript·react.js
代码cv移动工程师19 分钟前
HTML语法规范
前端·html
Elena_Lucky_baby41 分钟前
实现路由懒加载的方式有哪些?
前端·javascript·vue.js
Domain-zhuo41 分钟前
如何利用webpack来优化前端性能?
前端·webpack·前端框架·node.js·ecmascript
理想不理想v1 小时前
webpack如何自定义插件?示例
前端·webpack·node.js
小华同学ai1 小时前
ShowDoc:Star12.3k,福利项目,个人小团队的在线文档“简单、易用、轻量化”还专门针对API文档、技术文档做了优化
前端·程序员·github
王解1 小时前
Vue CLI 脚手架创建项目流程详解 (2)
前端·javascript·vue.js
刘大浪1 小时前
vue.js滑动到顶便锁定位置
前端·javascript·vue.js