vue3中的reactive、readonly和shallowReactive使用详解
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
1. reactive 与 readonly 使用
readonly:拷贝一份 proxy 对象将其设置为只读。
使用 readonly 时, 变量里的属性不可改变。
需要注意的是:
当原本数据改变时,使用了 readonly 函数的值也会发生改变。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <template> <div> <form> <input v-model= "obj.name" type= "text" /> <br /> <input v-model= "obj.age" type= "text" /> <br /> <button @click.prevent= "submit" >提交</button> </form> </div> </template> <script setup lang= "ts" > import { ref, reactive, readonly, shallowReactive } from 'vue' const obj = reactive({ name: '张三' , age: 23 }) const copy = readonly(obj) const submit = () => { obj.age++ console.log(copy) } </script> |
在这个例子中,修改响应式对象中的 age 属性, readonly 中的 age 属性也会随之更改。
2. shallowReactive
- 创建
浅层
的响应式
对象 - 修改内部属性时,
只改变值
,不更新视图
在 Vue3 中,可以使用 shallowReactive 函数创建一个浅层响应式对象。它接收一个普通对象作为参数,返回一个浅层响应式代理对象。这个代理对象只能处理对象的一级属性,不能处理嵌套在对象中的属性的响应式更新。当我们读取代理对象的属性时,会触发依赖收集;当我们修改代理对象的属性时,会触发相应的依赖更新。在调用 shallowReactive 函数时, Vue3 会使用 Proxy 对象对传入的对象进行代理,从而实现浅层响应式特性。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <template> <div>{{ state }}</div> <br /> <button @click= "change1" >test1</button> <br /> <button @click= "change2" >test2</button> </template> <script setup lang= "ts" > import { ref, reactive, readonly, shallowReactive } from 'vue' const state = shallowReactive({ a: 1, first: { b: 2, second: { c: 3 } } }) const change1 = () => { state.a = 7 } const change2 = () => { state.first.b = 8 state.first.second.c = 9 console.log(state) } </script> |
点击 test1 后: state.a 的值变为 7
点击 test2 后:视图没有发生改变,控制台如下
到此这篇关于vue3中的reactive、readonly和shallowReactive的文章就介绍到这了,更多相关vue3 reactive、readonly和shallowReactive内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
Vue中的element tabs点击锚点定位,鼠标滚动定位
这篇文章主要介绍了Vue中的element tabs点击锚点定位,鼠标滚动定位方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
最新评论