vue 学习 -- day39(reactive 对比 ref)

  • 从定义数据角度对比:
    • ref用来定义:基本类型数据
    • reactive用来定义:对象(或数组)类型数据
    • 备注:ref也可以用来定义对象(或数组)类型数据 , 它内部会自动通过reactive转为代理对象
  • 从原理角度对比:
    • ref通过Object.defineProperty()getset来实现响应式(数据劫持)。
    • reactive通过使用Proxy来实现响应式(数据劫持), 并通过Reflect 操作源对象内部的数据。
  • 从使用角度对比:
    • ref定义的数据:操作数据需要 .value,读取数据时模板中直接读取不需要 .value
    • reactive定义的数据:操作数据与读取数据:均不需要 .value

一般来说,会把组件里面用到的数据封装到对象里给 reactive 加工成响应式对象(代理对象),这样读取或修改的时候就不用 .value 了

相关推荐
小林rush7 分钟前
uni-app跨分包自定义组件引用解决方案
前端·javascript·vue.js
我的一行7 分钟前
已有项目,接入pnpm + turbo
前端·vue.js
心.c9 分钟前
为什么在 Vue 3 中 uni.createCanvasContext 画不出图?
前端·javascript·vue.js
咸鱼加辣11 分钟前
【vue面试】ref和reactive
前端·javascript·vue.js
用户8417948145614 分钟前
vxe-table 导入 excel xlsx 时,单元格内容值丢失前面0解决方法
vue.js
KLW7521 分钟前
vue2 与vue3 中v-model的区别
前端·javascript·vue.js
keyV29 分钟前
告别满屏 v-if:用一个自定义指令搞定 Vue 前端权限控制
前端·vue.js·promise
www_stdio36 分钟前
我的猫终于打上冰球了——一个 Vue3 + Coze AI 项目的完整落地手记
javascript·vue.js·coze
江公望1 小时前
Vue3的 nextTick API 5分钟讲清楚
前端·javascript·vue.js
辛-夷1 小时前
pinia与Vuex高频面试题
前端·vue.js