Vue学习笔记-Vue3中的shallowReactive和shallowRef

最新推荐文章于 2024-07-27 14:15:10 发布
最新推荐文章于 2024-07-27 14:15:10 发布
阅读量401 收藏 1
点赞数
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/theLuckyLong/article/details/134988280
版权

shallowReactive

  • 作用：与reactive作用类似，但只处理对象最外层属性的响应式（浅响应式）
  • 使用场景：如果有一个对象数据，结构比较深（内嵌多层对象），但只需要最外层的属性进行响应式，则使用shallowReactive

shallowRef

  • 作用：与ref作用类型，但只处理基本数据类型的响应式，不处理对象类的响应式
  • 使用场景：如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换，则使用shallowRef

心得

上述API函数主要用于性能优化

theLuckyLong
关注
专栏目录
VUE框架Vue3下使用shallowReactive进行系统性能优化的细节和使用场景------VUE框架
春风若有怜花意，可否许我再少年
12-27 924
VUE框架Vue3下使用shallowReactive进行系统性能优化的细节和使用场景------VUE框架
深入了解 shallowRef 和 shallowReactive
qq_53114797的博客
06-30 5251
通过使用shallowRef和，我们可以更加灵活地处理响应式数据。它们能够提高性能，并且在某些场景下帮助我们避免不必要的响应式更新。当我们明确知道某个值或对象的内部属性不需要进行深层次的响应式处理时，就可以选择使用shallowRef或来优化我们的代码。在实际开发中，请根据具体需求和情况谨慎选择是否使用shallowRef和，并合理利用它们提供的优势。
Vue3响应式高阶用法之shallowReactive()
最新发布
訾博（ZiBo）的博客
07-27 512
在Vue3中，响应式系统是其核心特性之一。是Vue3提供的一种高阶响应式API，它与reactive()类似，但有着显著的区别。本文将详细介绍的使用场景、基本用法、功能详解、最佳实践及案例，帮助读者更好地理解和应用这一特性。是Vue3中一个非常有用的高阶响应式API，适用于需要浅层响应和性能优化的场景。通过本文的介绍，读者应该能够理解的基本用法和功能，并在实际项目中灵活应用这一特性以提升性能和开发效率。希望这篇博客能帮助你更好地掌握Vue3的响应式系统，并在实际开发中获得更多的价值。
第六节:带你全面理解vue3 浅层响应式API: shallowRef, shallowReactive, shallowReadonly
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
05-22 2882
本章主要给大家讲解创建浅层响应式数据的 API, 即`shallowRef`, `shallowReactive`, `shallowReadonly`
使用 shallowRef() 来绕开深度响应
文摘资讯
01-01 943
Vue 的响应性系统默认是深度的。虽然这让状态管理变得更直观，但在数据量巨大时，深度响应性也会导致不小的性能负担，因为每个属性访问都将触发代理的依赖追踪。好在这种性能负担通常这只有在处理超大型数组或层级很深的对象时，例如一次渲染需要访问 100,000+ 个属性时，才会变得比较明显。因此，它只会影响少数特定的场景。Vue 确实也为此提供了一种解决方案，通过使用 shallowRef() 和 sha...
Vue3:响应式进阶（shallowRef、triggerRef、customRef、shallowReactive、shallowReadonly、toRaw）
weixin_62364503的博客
09-22 1702
Vue3:响应式 API：进阶
vue3笔记----记录自天禹老师的vue2+vue3全套教程（vue3部分）
weixin_55935744的博客
01-26 926
vue3笔记一、Vue3简介1、性能的提升2、源码的升级3、Vue3可以更好的支持TypeScript4、新的特性二、创建vue3工程1、使用vue-cli创建2、使用vite创建三、常用Composition API四、其他Composition API五、Composition API的优势六、新的组件七、其他 一、Vue3简介 1、性能的提升 打包大小减少了41% 初次渲染快55%，更新渲染快144% 内存减少54% … 2、源码的升级 使用Proxy代替defineProperty实现响应式
Vue3 学习笔记 —— shallowReactive 和 shallowRef
叹之
05-05 566
shallowReactive 只处理了对象内最外层属性的响应式，适用于对象结构较深，但只有外层属性变化 shallowRef 只处理了value的响应式，不进行对象的 reactive 处理，适用于会被替换的数据 示例： <template> m1: {{m1}} <br> m2: {{m2}} <br> m3: {{m3}} <br> m4: {{m4}} <br> <button @click="change
vue3自己的学习笔记
01-25
Vue 3 学习笔记 本文将详细介绍 Vue 3 中的新特性和变化，包括 Setup 函数、Reactive 数据、生命周期、计算属性、监听函数等等。 Setup 函数 在 Vue 3 中，Setup 函数是一个特殊的函数，它用于定义组件的初始状态...
vue3.0学习笔记（ref和shallowRef函数进行响应式）
m0_58849641的博客
07-06 684
1.引用ref，从vue里面 3.在页面上就可以渲染了 vue3.0就是这样通过ref来进行响应式操作
【Vue】Vue2.0+Vue3.0学习笔记day14（Vue3）
weixin_58214412的博客
01-19 986
目录 150.computed计算属性 151.watch监视ref定义的数据 152.watch监视reactive定义的数据 153.watch时value的问题 154.watchEffect函数 155.Vue3生命周期 156.自定义hook 157.toRef与toRefs 158.shallowReactive与shallowRef
【Vue3 知识第六讲】ref、 shallowRef、unref、isRef 等系列知识应用
前端知识分享喵
09-04 3295
ref、 shallowRef、unref、isRef 等系列知识应用
【vue3】shallowReactive与shallowRef；readonly与shallowReadonly；toRaw与markRaw
花椒和蕊的博客
10-02 920
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly；toRaw与markRaw详解
【Vue3】Ref 和 ShallowRef 的区别
正在解锁骑着骆驼去南极的世界
03-05 1688
Ref 是 Vue 3 中的一个新的基本响应式数据类型，它允许我们包装任意的 JavaScript 值，并且在数据变化时发出通知。Ref 提供了一个 .value 属性来访问其内部的值，同时还提供了一些额外的 API 来处理数据。Ref 可以被用于跟踪单个值的变化，并在需要时自动触发重新渲染。ShallowRef 与 Ref 类似，它也是用来包装值并监听变化的。但是，与 Ref 不同的是，ShallowRef 会对其包装的值进行浅层的响应式转换。
Vue3中 响应式 API（ shallowReactive、shallowRef、triggerRef 、customRef ）详解
明天也要努力的博客
10-06 1369
一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set。强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。如果一个对象属性数据，后续功能不会修改该对象中的属性，而是新生对象来替换。创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。
Vue3中shallowRef和shallowReactive的使用？
weixin_59763367的博客
04-13 720
shallowReactive和shadowRef就是浅层的reactive和ref。可以理解成，shallowReactive只能处理引用类型，只能监听对象的最外层属性，如果深度属性发生改变，是监听不到的，没法实现响应式。shallowRef和ref不同，只能处理基本类型，不能处理引用类型。处理基本类型的时候和ref一样。
shallowRef和shallowReactive的使用?
jia嘉ioo的博客
05-19 668
vue3中的shallowref和shalowreactive
Vue3：shallowReactive（reactive）与shallowRef(ref)
weixin_50236973的博客
12-13 439
Vue3：shallowReactive（reactive）与shallowRef(ref)
"前端Bootstrap Es6 vue学习笔记-基础环境配置和样式排版
综上所述，前端Bootstrap Es6 vue学习笔记囊括了前端开发的关键技术，包括基础环境配置、样式排版、响应式布局、组件、内置插件、HTML5 CSS3支持、LESS动态样式和Vue.js等。通过学习这些技术，我们可以更好地进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值