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

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

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

相关推荐
Howrun7774 小时前
VSCode烦人的远程交互UI讲解
ide·vue.js·vscode
小迷糊的学习记录6 小时前
Vuex 与 pinia
前端·javascript·vue.js
利刃大大6 小时前
【Vue】Element-Plus快速入门 && Form && Card && Table && Tree && Dialog && Menu
前端·javascript·vue.js·element-plus
小毛驴8508 小时前
Vue 路由示例
前端·javascript·vue.js
TT哇10 小时前
【实习 】银行经理端两个核心功能的开发与修复(银行经理绑定逻辑修复和线下领取扫码功能开发)
java·vue.js
星光不问赶路人11 小时前
vue3使用jsx语法详解
前端·vue.js
weixin79893765432...12 小时前
Vue 组件的更新过程(编译系统 + 响应式系统 + 虚拟 DOM & Diff)
vue.js
我是伪码农13 小时前
Vue 智慧商城项目
前端·javascript·vue.js
小书包酱14 小时前
在 VS Code中,vue2-vuex 使用终于有体验感增强的插件了。
vue.js·vuex
Zhencode14 小时前
Vue3 响应式依赖收集与更新之effect
前端·vue.js