reactive对比ref

从定义数据角度对比

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

从原理角度对比

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

从使用角度对比

  • ref定义的数据:操作数据需要.value,读取数据时模板中直接读取
  • reactive定义的数据:操作数据与读取数据,均不需要.value
相关推荐
小毛驴8509 分钟前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏38 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪2 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾2 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko2 小时前
HTML 常用标签速查表
前端·html