Vue3 里 shallowRef 与 shallowReactive 的使用方法

在 Vue3 的响应式系统中，shallowRef 与 shallowReactive 是两个重要的 API，它们为开发者提供了更精细的响应式数据控制。

首先来看 shallowRef。shallowRef 是一个浅层响应式引用，它只会跟踪对其 .value 属性的直接修改。与普通的 ref 不同，shallowRef 不会对内部对象进行深度响应式转换。这在某些场景下非常有用，比如当我们有一个大型对象，其中的属性变化很少，且不想为所有属性都创建深度响应式时，shallowRef 可以显著减少性能开销。

使用 shallowRef 很简单，只需导入并调用它即可。例如：

import { shallowRef } from 'vue';

const shallowData = shallowRef({
    name: '张三',
    age: 25
});

// 直接修改.value 会触发响应式更新
shallowData.value.name = '李四';

但要注意，如果直接修改 shallowData 所指向的对象内部属性，不会触发响应式更新。如 shallowData.value.address = '北京'; 这样的操作不会让 Vue 检测到变化。

再说说 shallowReactive。shallowReactive 创建一个浅层响应式对象，它只会对对象的第一层属性进行响应式代理。这意味着只有对象的直接属性变化会被 Vue 检测到，深层嵌套的属性变化不会触发更新。

import { shallowReactive } from 'vue';

const shallowObj = shallowReactive({
    title: '文章标题',
    content: '文章内容',
    details: {
        author: '作者',
        date: '2023-10-01'
    }
});

// 修改直接属性会触发响应式更新
shallowObj.title = '新标题';

// 修改深层属性不会触发响应式更新
shallowObj.details.author = '新作者';

在实际开发中，合理使用 shallowRef 与 shallowReactive 能够优化应用性能。比如在展示大量静态数据时，使用浅层响应式可以避免不必要的响应式处理。但也要注意其局限性，确保在需要深度响应式的场景下，使用 ref 或 reactive 来保证数据的正确更新与视图的同步。掌握这两个 API 的使用方法，能让我们在 Vue3 开发中更加灵活地处理响应式数据。