Vue3 ref函数和reactive函数

一、ref函数

1、作用:定义一个响应式的数据

2、语法:const xxx = ref(initValue)

1、创建一个包含响应式数据的引用对象(reference对象,简称ref对象)

2、JS中操作数据:xxx.value

3、模板中读取数据:不需要.value,直接:<div>{{xxx}}</div>

3、备注

1、接收的类型可以是:基本类型、也可以是对象类型

2、基本类型的数据:响应式依然是靠Object.defineProperty()的get与set完成的

3、对象类型的数据:内部用了Vue3中的新函数------reactive函数

二、reactive函数

1、作用:定义一个对象类型的响应式数据(基本类型用ref函数)

2、语法:const 代理对象=reactive(被代理对象)接收一个对象(或数组),返回一个代理器对象(proxy对象)

3、reactive定义的响应式数据是"深层次的"

4、内部基于ES6的Proxy实现,通过代理对象操作源对象内部都是响应式的

相关推荐
wx_lidysun4 小时前
Nextjs学习笔记
前端·react·next
无羡仙7 小时前
从零构建 Vue 弹窗组件
前端·vue.js
源心锁8 小时前
👋 手搓 gzip 实现的文件分块压缩上传
前端·javascript
源心锁8 小时前
丧心病狂!在浏览器全天候记录用户行为排障
前端·架构
GIS之路8 小时前
GDAL 实现投影转换
前端
烛阴8 小时前
从“无”到“有”:手动实现一个 3D 渲染循环全过程
前端·webgl·three.js
BD_Marathon9 小时前
SpringBoot——辅助功能之切换web服务器
服务器·前端·spring boot
Kagol9 小时前
JavaScript 中的 sort 排序问题
前端·javascript
eason_fan9 小时前
Service Worker 缓存请求:前端性能优化的进阶利器
前端·性能优化
光影少年9 小时前
rn如何和原生进行通信,是单线程还是多线程,通信方式都有哪些
前端·react native·react.js·taro