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

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

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

相关推荐
无羡仙7 小时前
从零构建 Vue 弹窗组件
前端·vue.js
计算机毕设VX:Fegn089510 小时前
计算机毕业设计|基于springboot + vue动物园管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
北辰alk11 小时前
深入理解Vue数据流:单向与双向的哲学博弈
vue.js
北辰alk11 小时前
解决Vue打包后静态资源图片失效的终极指南
vue.js
Jing_Rainbow13 小时前
【Vue-2/Lesson62(2025-12-10)】模块化与 Node.js HTTP 服务器开发详解🧩
前端·vue.js·node.js
冴羽14 小时前
2026 年 Web 前端开发的 8 个趋势!
前端·javascript·vue.js
五仁火烧15 小时前
Vue3 项目的默认端口行为
服务器·vue.js·nginx·容器·vue
Younglina16 小时前
一个纯前端的网站集合管理工具
前端·vue.js·chrome
pas13616 小时前
31-mini-vue 更新element的children
前端·javascript·vue.js
计算机程序设计小李同学17 小时前
婚纱摄影集成管理系统小程序
java·vue.js·spring boot·后端·微信小程序·小程序