`shallowReactive` 与 `shallowRef`：浅层响应式 API

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

• • `shallowReactive`
  • • [使用 `shallowReactive`](#使用 shallowReactive)
  • `shallowRef`
  • • [使用 `shallowRef`](#使用 shallowRef)
  • 适用场景
  • 总结

在 Vue3 中，shallowReactive 和 shallowRef 是两种特殊的响应式 API，它们提供了一种浅层响应式的方式来处理对象和引用类型的数据。

shallowReactive

shallowReactive 创建一个浅层响应式对象。这意味着只有对象的顶层属性是响应式的，嵌套的对象属性不会被转换为响应式。

使用 shallowReactive

import { shallowReactive } from 'vue';

const state = shallowReactive({
foo: 1,
bar: {
baz: 2
}
});

// 改变顶层属性会触发更新
state.foo++; // 响应式

// 改变嵌套属性不会触发更新
state.bar.baz++; // 非响应式

shallowRef

shallowRef 创建一个浅层响应式的引用。与普通的 ref 不同，shallowRef 只有在引用的值本身改变时才会触发更新，如果引用的对象内部的属性发生变化，不会触发更新。

使用 shallowRef

import { shallowRef } from 'vue';

const state = shallowRef({
foo: 1,
bar: {
baz: 2
}
});

// 改变引用的值会触发更新
state.value = { foo: 2 }; // 响应式

// 改变引用对象的属性不会触发更新
state.value.bar.baz++; // 非响应式

适用场景

shallowReactive 和 shallowRef 适用于以下场景：

• 当你有一个大型数据结构，并且只想对顶层属性进行响应式处理时。
• 当你知道嵌套对象不会改变，或者你不关心嵌套对象内部的变化时。
• 当你需要优化性能，并且可以接受一定程度的非响应式行为时。

总结

• shallowReactive 和 shallowRef 提供了浅层响应式的行为，只有顶层属性或引用本身的改变才会触发更新。
• 这两种 API 在处理大型数据结构或优化性能时非常有用。
• 使用它们时需要注意，嵌套对象的内部变化不会触发视图更新。