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

相关推荐
陈随易12 小时前
有生之年系列,Nodejs进程管理pm2 v7.0发布
前端·后端·程序员
冰暮流星12 小时前
javascript之事件代理/事件委托
前端
@yanyu66613 小时前
登录注册功能-明文
vue.js·springboot
陈随易13 小时前
AI时代,你还在坚持手搓文章吗
前端·后端·程序员
里欧跑得慢16 小时前
17. Flutter Hero动画实现:让界面过渡更加优雅
前端·css·flutter·web
IT_陈寒16 小时前
Vue的这个响应式陷阱,我debug了一整天才爬出来
前端·人工智能·后端
kyriewen16 小时前
前端测试:别为了100%覆盖率而写测试,那是自欺欺人
前端·javascript·单元测试
去伪存真17 小时前
我自己写的第一个skills--project-core-standards
前端·agent
Data_Journal17 小时前
如何使用cURL更改User Agent
大数据·服务器·前端·javascript·数据库
竹林81817 小时前
wagmi v2 多链钱包切换:一个 Uniswap 仿盘项目让我踩了三天坑
前端·javascript