Vue3 中的 deep reactive 深度响应式原理及应用是什么？

提问者：Terry2025.04.18浏览：182

vue3 问答

在 Vue3 的生态体系中，deep reactive（深度响应式）是一个极为重要的概念，它在构建复杂且高效的前端应用过程中，起着关键的作用，下面我们通过一系列问答来深入探讨 Vue3 中的 deep reactive。

什么是 Vue3 的 deep reactive？

Vue3 的 deep reactive 指的是 Vue3 的响应式系统能够深度追踪对象和数组内部的变化，当一个对象或数组被创建为响应式数据时，不仅对该对象或数组本身的直接属性访问和修改会触发响应式更新，而且对其内部嵌套的对象和数组的属性访问和修改同样也会触发响应式更新,有这样一个嵌套对象：

import { reactive } from 'vue';
const data = reactive({
    user: {
        name: 'John',
        age: 30,
        address: {
            city: 'New York'
        }
    }
});
// 当修改内部嵌套的属性时，Vue3 能检测到变化并更新视图
data.user.address.city = 'San Francisco';

这就是 deep reactive 的体现，Vue3 能够深入到嵌套结构中感知变化并做出响应。

deep reactive 是如何实现的？

在 Vue3 中，deep reactive 的实现主要依赖于 Proxy 和 Reflect，Proxy 是 ES6 提供的一个用于创建对象代理的构造函数，它可以拦截并自定义基本操作，比如属性访问、赋值、枚举、函数调用等，而 Reflect 是一个内置对象，它提供了一系列静态方法，这些方法与对象的基本操作相对应，并且其设计目的之一就是与 Proxy 配合使用。

Vue3 通过 Proxy 创建一个响应式代理对象，这个代理对象会拦截对目标对象的各种操作，当访问对象属性时，Proxy 会进行依赖收集，将当前的副作用函数（例如组件的渲染函数）收集到与之相关的依赖集合中，当属性值发生变化时，Proxy 会通过 Reflect 来修改实际的属性值，并且触发之前收集的依赖，从而通知相关的副作用函数重新执行,实现视图的更新。

对于数组，Vue3 同样利用 Proxy 拦截数组的方法调用，如 push、pop、shift、unshift 等，当这些方法被调用时，不仅会改变数组本身，还会触发响应式更新，对于数组元素的直接访问和修改，也能通过 Proxy 进行追踪。

deep reactive 与 shallow reactive 有什么区别？

shallow reactive（浅层响应式）是 Vue3 提供的另一种响应式创建方式，与 deep reactive 不同，shallow reactive 只对对象的第一层属性进行响应式追踪,而不会对嵌套对象或数组内部进行深度追踪。

以如下代码为例：

import { shallowReactive } from 'vue';
const shallowData = shallowReactive({
    user: {
        name: 'Jane',
        age: 25
    }
});
// 直接修改第一层属性会触发响应式更新
shallowData.user = {
    name: 'Bob',
    age: 35
};
// 但修改嵌套对象内部属性不会触发响应式更新
shallowData.user.name = 'Alice';

而 deep reactive 则会对上述两种情况都触发响应式更新，shallow reactive 适用于那些我们明确知道不需要对深层数据变化进行追踪的场景，这样可以减少不必要的性能开销，在一些组件中，数据结构可能比较复杂，但我们只关心最外层数据的变化，这时使用 shallow reactive 就更为合适。

在实际项目中，什么时候适合使用 deep reactive？

数据结构复杂且深度嵌套的场景：例如一个电商应用中，商品详情页面的数据结构可能包含商品基本信息、规格参数、用户评论等多个嵌套层次，这些数据之间相互关联，任何一层数据的变化都可能影响到页面的显示，在这种情况下，使用 deep reactive 能够确保整个数据结构的变化都能被准确地追踪和响应，从而保证页面的实时更新。

import { reactive } from 'vue';
const product = reactive({
 id: 1,
 name: 'Sample Product',
 details: {
     description: 'This is a sample product',
     features: ['Feature 1', 'Feature 2'],
     price: {
         original: 100,
         discounted: 80
     }
 },
 reviews: [
     {
         author: 'User1',
         content: 'Good product'
     },
     {
         author: 'User2',
         content: 'Could be better'
     }
 ]
});
// 无论是修改价格还是评论内容，都能触发视图更新
product.details.price.discounted = 75;
product.reviews[0].content = 'Great product!';

数据频繁变化且需要实时响应的场景：如实时的股票交易数据展示页面，股票的价格、成交量等数据会不断变化，并且这些数据可能存在一定的嵌套结构，使用 deep reactive 可以确保数据的每一次变化都能及时反映到页面上,为用户提供准确的实时信息。
组件间数据传递与共享的场景：当一个组件的状态需要被多个子组件依赖，并且数据结构较为复杂时，使用 deep reactive 能够保证数据在传递和共享过程中的一致性，父组件将 deep reactive 数据传递给子组件后,任何一方对数据的修改都能让其他相关组件及时感知并更新。

deep reactive 可能会带来哪些性能问题？如何解决？

性能问题：
- 依赖收集过多：由于 deep reactive 会深度追踪数据变化，在数据结构非常复杂且嵌套层次极深的情况下，可能会导致大量的依赖被收集，当数据发生变化时，触发的依赖更新数量也会非常庞大,从而影响性能。
- 不必要的更新：如果在一个大型应用中，有很多深层数据的变化频繁发生，但实际上这些变化并不影响当前视图的显示，deep reactive 可能会导致不必要的视图更新,浪费性能资源。
解决方法：
- 使用 shallow reactive：对于那些不需要深度追踪的部分数据，可以使用 shallow reactive 来减少依赖收集的数量，在一个包含大量用户信息的列表页面，每个用户对象可能有一些嵌套的详细信息，但列表视图只关心用户的基本信息（如姓名、头像等），这时可以对用户对象使用 shallow reactive。
- 优化数据结构：尽量简化数据结构，避免过度嵌套，将一些不经常变化的深层数据提取出来，单独管理，减少 deep reactive 需要追踪的范围。
- 使用 computed 计算属性：对于一些依赖于深层数据但又不经常变化的计算结果，可以使用 computed 计算属性，computed 会缓存计算结果，只有当它依赖的响应式数据发生变化时才会重新计算，从而避免不必要的重复计算和更新，在一个电商购物车应用中，购物车商品总价是依赖于每个商品的价格和数量（可能存在深层嵌套结构），可以使用 computed 来计算总价，只有当商品价格或数量变化时才重新计算总价。
```
import { reactive, computed } from 'vue';
const cart = reactive({
items: [
   {
       id: 1,
       name: 'Product 1',
       price: 10,
       quantity: 2,
       details: {
           description: 'Some details'
       }
   }
]
});
const totalPrice = computed(() => {
return cart.items.reduce((acc, item) => acc + item.price * item.quantity, 0);
});
```