`readonly` 与 `shallowReadonly`：Vue3 中的只读响应式对象

前端开发工程师、技术日更博主、已过CET6
阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

在 Vue3 中，readonly 和 shallowReadonly 是两种 API，用于使响应式对象变为只读状态，防止其被修改。

readonly

readonly 函数可以使得一个响应式对象变为完全只读，这意味着不仅对象的顶层属性不能被修改，其嵌套的响应式属性也同样变为只读。

使用 readonly

import { reactive, readonly } from 'vue';

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

const readonlyState = readonly(state);

// 尝试修改顶层属性会失败
readonlyState.foo++; // 非响应式，修改无效

// 尝试修改嵌套属性也会失败
readonlyState.bar.baz++; // 非响应式，修改无效

shallowReadonly

shallowReadonly 函数创建一个浅层只读的响应式对象。这意味着只有对象的顶层属性变为只读，而嵌套的对象属性仍然可以修改。

使用 shallowReadonly

import { reactive, shallowReadonly } from 'vue';

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

const shallowReadonlyState = shallowReadonly(state);

// 尝试修改顶层属性会失败
shallowReadonlyState.foo++; // 非响应式，修改无效

// 修改嵌套属性仍然有效
shallowReadonlyState.bar.baz++; // 响应式，修改有效

适用场景

• readonly 适用于当你想确保一个对象及其所有嵌套属性都不可修改时。
• shallowReadonly 适用于当你只想保护对象的顶层属性不被修改，而允许修改嵌套属性时。

总结

• readonly 和 shallowReadonly 都可以用来创建只读的响应式对象。
• readonly 提供完全的只读保护，包括所有嵌套属性。
• shallowReadonly 只保护对象的顶层属性，嵌套属性仍然可以被修改。
• 这两种 API 在需要保护数据不被意外修改时非常有用，例如在某些情况下，你可能希望防止组件内部状态被外部修改。