Vue3 的 shallowRef 和 shallowReactive:优化性能

本文主要是介绍Vue3 的 shallowRef 和 shallowReactive:优化性能,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢?

在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。

1. 浅层与深层的对比

1.1 浅层(Shallow)

定义:只对数据结构的最外层进行操作或跟踪。对于嵌套的属性或对象,不会递归地追踪其内部的变化。

应用:在需要优化性能时,减少不必要的深层次数据追踪。比如:shallowRef 和 shallowReactive 提供了这种功能。

优点:提高性能,减少 Vue 内部的深度响应式追踪,特别是在数据结构复杂时效果显著。

缺点:无法自动跟踪嵌套对象或数组内部的变化,需要手动处理或选择其他方式。

1.2 深层(Deep)

定义:对数据结构的所有层级都进行操作或跟踪。递归地追踪嵌套的对象或数组中的所有属性。

应用:在需要全面跟踪数据变化时,例如使用 reactive 进行深层响应式追踪。

优点:能够自动跟踪嵌套的所有属性变化,确保数据的每一层都响应式。

缺点:性能开销较大,特别是在数据结构非常复杂或庞大时。

下面简单介绍一下它们吧。

shallowRef 和 shallowReactive 是 Vue3 提供的 API,它们与 ref 和 reactive 类似,不同点在于它们只会浅层地监听对象或数组的变化。也就是说,它们不会递归监听对象或数组的深层次属性,只会监听第一层属性的变化。

2. shallowRef 

2.1 用途

shallowRef 用于创建一个浅层响应式的引用。与 ref 不同,shallowRef 只会追踪引用值的第一层数据变化,而不会递归追踪嵌套对象的变化。

2.2 使用场景

当有一个复杂的数据结构,但只关心数据结构的顶层变化时,可以使用 shallowRef。这种方式可以避免不必要的深层次响应式追踪,提高性能。

举个 🌰

<template><div>{{ obj }}</div>
</template><script>
import { shallowRef, watchEffect } from 'vue';
export default {setup() {const obj = shallowRef({nested: {a: 1,b: 2,},});obj.value = { nested: { a: 10, b: 20 } }; obj.value.nested.a = 100; watchEffect(() => {console.log('obj change:', obj.value.nested);});return {obj,};},
};
</script>

按照我们对 shallowRef 的理解,修改 nested 对象的 a 属性不会触发响应式更新,因为 shallowRef 只追踪 obj.value 的第一层。只有当整个 obj.value 被重新赋值时,Vue 才会进行视图更新。

- obj.value = { nested: { a: 10, b: 20 } }; 重新赋值整个对象时,触发更新;

- obj.value.nested.a = 100; 不会触发视图更新,因为这是嵌套对象的属性。

但实际如下:两次对 obj 的修改均起作用,这是怎么回事呢?

2.3 解释原因

注意注意📢:shallowRef 对嵌套对象的属性变化仍会触发视图更新。

shallowRef 创建的对象对于顶层属性和嵌套属性的变化都有响应式处理,只不过对于嵌套属性的响应式处理是依赖于顶层对象的变化。

- 顶层属性:shallowRef 只会追踪顶层引用的变化。这意味着我们可以用 shallowRef 来存储一个对象或数组,修改这个对象或数组的引用会触发视图更新。
- 嵌套属性:对于嵌套属性的修改,实际上 shallowRef 也会触发更新,因为 Vue 的响应式系统会处理嵌套对象的变化。

这是因为 Vue 的响应式系统会代理整个对象,包括嵌套对象。即使 shallowRef 只对顶层进行浅层响应,嵌套对象的属性依然会被处理,以确保更新的正确性。

因此:

- obj.value = { nested: { a: 10, b: 2 } }; 修改顶层属性,会触发视图更新;

- obj.value.nested.a = 100; 修改嵌套属性,也会触发视图更新。

对于这一点,大家在使用时需要特别注意!

3. shallowReactive

3.1 用途

shallowReactive 用于创建一个浅层响应式对象。与 reactive 类似,shallowReactive 只会追踪对象或数组的第一层属性变化,而不会追踪深层嵌套属性的变化。

3.2 使用场景

适用于复杂对象或数组,但只关心对象的第一层属性变化的场景。通过使用 shallowReactive 可以提高性能,减少 Vue 递归追踪数据的开销。

举个 🌰

<template><div>{{ obj }}</div>
</template><script>
import { shallowRef, watchEffect, shallowReactive } from 'vue';
export default {setup() {const obj = shallowReactive({firstLayer: {nested: { a: 1, b: 2 },},});obj.firstLayer = { nested: { a: 10, b: 20 } };obj.firstLayer.nested.a = 20;watchEffect(() => {console.log('watchEffect obj.firstLayer: ', obj.firstLayer);});return {obj,};},
};
</script>

结果显然: 

在 shallowReactive 中,虽然 Vue 文档中提到 shallowReactive 只会追踪顶层属性的响应式更新,但实际上它的行为与 shallowRef 类似。即使使用 shallowReactive,嵌套对象的某些修改也可能触发响应式更新。这是因为 Vue 内部的响应式系统并没有完全忽略嵌套属性,尤其是在某些情况下,Vue 会使用 Proxy 机制对嵌套对象进行代理,因此仍然可能触发视图更新。

4. 为什么会触发响应式更新?

1、Proxy 代理机制

Vue 的响应式系统通过 Proxy 来代理对象,即使使用 shallowRef 和 shallowReactive 也意味着 Vue 可能会为某些嵌套属性创建代理。这使得嵌套属性的修改在某些场景下依然会被追踪。

2、浅层追踪但部分嵌套依然可见

虽然 shallowRef 和 shallowReactive 主要用于优化性能,避免深度嵌套数据的自动响应式追踪,但对于浅层的属性,Vue 仍然会在某些情况下处理这些嵌套的数据结构。

对于 更深层次 的理解:

二者的初衷是减少 Vue 内部对深度嵌套对象的递归代理操作,但并不代表 Vue 会完全忽略嵌套属性的变化。这种“半浅层”的响应式处理方式使它能够有效追踪浅层属性,同时在某些情况下允许嵌套属性的修改被捕获。

注意📢:

虽然 shallowRef 和 shallowReactive 的某些嵌套属性会被代理并追踪其变化,进而导致修改这些属性时触发视图更新,但如果项目中深层嵌套的数据非常复杂且变化频繁,二者依然可以减少 Vue 的深层追踪,优化性能。

5. 对比

5.1 shallowRef 和 shallowReactive

1、数据类型的适用性

- shallowRef:适用于简单类型、引用类型(如对象、数组等),它包装了一个引用数据。

- shallowReactive:适用于对象类型,它将整个对象的第一层做响应式处理。

2、深层次数据的处理

shallowRef 和 shallowReactive 都不会递归侦听深层次数据,但 Vue 本身在修改深层属性时触发更新。若需要监听深层次的数据变更,应该使用 ref 或 reactive,它们会递归地监听所有层级的属性。

3、性能优势

对于只需要监听顶层属性变化的场景,shallowRef 和 shallowReactive 可以减少 Vue 内部的追踪操作,从而提升性能,特别是当数据结构非常复杂或庞大时。

5.2 ref 和 reactive

ref

- 深层响应:对所有层级的属性进行响应式处理,包括嵌套对象或数组。

- 行为:修改引用值以及嵌套对象的任意属性,都会触发响应式更新。

- 适用场景:适用于需要对复杂数据结构进行全方位追踪,确保所有层级变化都被检测到的场景。

reactive

- 深层响应:对整个对象及其嵌套属性进行递归式的响应式代理。

- 行为:无论顶层属性还是嵌套属性的修改,都会触发视图更新。

- 适用场景:适合需要对深度嵌套对象进行全面追踪的场景,通常用于大部分 Vue 项目中。

5.3 注意事项

1、设计意图

Vue 3 提供 shallowRef 和 shallowReactive 是为了在不需要深度追踪数据的场景下优化性能。应根据具体的业务需求选择合适的响应式方式。

2、响应性丢失的风险

如果使用了 shallowRef 和 shallowReactive,嵌套对象的属性在直接修改时不会触发响应式更新,这可能导致一些视图更新的逻辑失效,使用时需要明确知道这一点。

最后,在使用时要根据具体需求进行权衡,合理选择使用 ref、reactive 或浅层响应式 API。

这篇关于Vue3 的 shallowRef 和 shallowReactive:优化性能的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1151918

相关文章

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析

Linux系统性能检测命令详解

《Linux系统性能检测命令详解》本文介绍了Linux系统常用的监控命令(如top、vmstat、iostat、htop等)及其参数功能,涵盖进程状态、内存使用、磁盘I/O、系统负载等多维度资源监控,... 目录toppsuptimevmstatIOStatiotopslabtophtopdstatnmon

MyBatisPlus如何优化千万级数据的CRUD

《MyBatisPlus如何优化千万级数据的CRUD》最近负责的一个项目,数据库表量级破千万,每次执行CRUD都像走钢丝,稍有不慎就引起数据库报警,本文就结合这个项目的实战经验,聊聊MyBatisPl... 目录背景一、MyBATis Plus 简介二、千万级数据的挑战三、优化 CRUD 的关键策略1. 查

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.