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实现,通过代理对象操作源对象内部都是响应式的

相关推荐
小小尚@几秒前
WebGIS/ECharts 地图开发|MapLand 在线行政区划边界一键下载 GeoJSON 工具
前端·javascript·echarts
默_笙40 分钟前
🚍 一条 Todo 的奇幻漂流:TypeScript 全栈类型安全的"护照检查"
前端·javascript
计算机魔术师1 小时前
NVIDIA 以 129.3 亿美元收购 Hugging Face
前端
平头哥技术团队1 小时前
Day 01 | 用 HTML 写第一个网页:双击就能在浏览器打开
前端
weixin_422555422 小时前
el-menu子菜单点击就被激活,恢复之前的激活状态
javascript·vue.js·elementui
计算机魔术师2 小时前
两年翻45倍!英伟达靠买买买建成千亿投资帝国
前端
paopaokaka_luck2 小时前
基于springboot3+vue3的精准扶贫管理系统(AI 问答、ECharts 图形化分析)
前端·人工智能·echarts
l1m0_3 小时前
智能电动自行车管理后台实战:AI生成页面与React组件化技巧
前端·react.js·ui·ai·设计
Patrick_Wilson3 小时前
为什么gitlab的MR会默认有一个merge commit
前端·git·gitlab
en.en..3 小时前
Linux mmap 内存映射深度解析:基于帧缓冲 /dev/fb0
java·服务器·前端