本文主要是介绍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：优化性能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
