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

相关推荐
艾小码1 小时前
还在为组件通信头疼?defineExpose让你彻底告别传值烦恼
前端·javascript·vue.js
gnip1 小时前
docker总结
前端
槁***耿1 小时前
TypeScript类型推断
前端·javascript·typescript
带只拖鞋去流浪1 小时前
迎接2026,重新认识Vue CLI (v5.x)
前端·vue.js·webpack
Coder-coco1 小时前
游戏助手|游戏攻略|基于SprinBoot+vue的游戏攻略系统小程序(源码+数据库+文档)
java·vue.js·spring boot·游戏·小程序·论文·游戏助手
c***V3234 小时前
Vue优化
前端·javascript·vue.js
李@十一₂⁰6 小时前
HTML 特殊字体符号
前端·html
小奶包他干奶奶8 小时前
Webpack学习——Loader(文件转换器)
前端·学习·webpack
zy happy8 小时前
若依 vue3 报错:找不到模块“@/api/xxxx/xxxxx”或其相应的类型声明。。Vue 3 can not find mod
前端·javascript·vue.js