reactive对比ref

从定义数据角度对比

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

从原理角度对比

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

从使用角度对比

  • ref定义的数据:操作数据需要.value,读取数据时模板中直接读取
  • reactive定义的数据:操作数据与读取数据,均不需要.value
相关推荐
林的快手31 分钟前
CSS列表属性
前端·javascript·css·ajax·firefox·html5·safari
匹马夕阳1 小时前
ECharts极简入门
前端·信息可视化·echarts
API_technology1 小时前
电商API安全防护:JWT令牌与XSS防御实战
前端·安全·xss
yqcoder1 小时前
Express + MongoDB 实现在筛选时间段中用户名的模糊查询
java·前端·javascript
十八朵郁金香2 小时前
通俗易懂的DOM1级标准介绍
开发语言·前端·javascript
m0_528723813 小时前
HTML中,title和h1标签的区别是什么?
前端·html
Dark_programmer3 小时前
html - - - - - modal弹窗出现时,页面怎么能限制滚动
前端·html
GDAL3 小时前
HTML Canvas clip 深入全面讲解
前端·javascript·canvas
禾苗种树3 小时前
在 Vue 3 中使用 ECharts 制作多 Y 轴折线图时,若希望 **Y 轴颜色自动匹配折线颜色**且无需手动干预,可以通过以下步骤实现:
前端·vue.js·echarts
贵州数擎科技有限公司3 小时前
使用 Three.js 实现流光特效
前端·webgl