对外只读、内部可写需结合私有字段+getter、proxy拦截或object.defineproperty实现：私有字段隔离数据源，getter暴露只读值；proxy闭包缓存+set拦截禁止外部修改；defineproperty锁定单属性writable/configurable；响应式框架中应配合readonly与computed确保响应性。
直接用存取描述符（getter/setter）实现“对外只读、内部可写”，关键在于把写操作收口到可控入口，同时隐藏原始数据源。这不是单纯加个 get 就完事，而是要配合私有字段、代理或闭包，让外部无法绕过访问器直接修改。
用私有字段 + 公开 getter 实现真隔离
ES2022 私有字段（# 开头）天然隔绝外部访问，搭配 getter 就能安全暴露只读值：
- 私有字段存储真实值，外部代码完全无法读取或赋值
- getter 返回该字段的副本或计算结果，避免返回引用导致意外修改
- 内部方法（如初始化、更新逻辑）可自由操作私有字段，不受限制
示例：
class Config {
#data = { timeout: 3000, baseUrl: 'https://api.example.com' };
<p>get timeout() {
return this.#data.timeout; // 返回原始值（基础类型安全）
}</p><p>get baseUrl() {
return this.#data.baseUrl; // 同上
}</p><p>// 内部可调用的方法，用于安全更新
updateTimeout(newVal) {
if (typeof newVal === 'number' && newVal > 0) {
this.#data.timeout = newVal;
}
}
}</p>
用 Proxy 拦截 + 闭包缓存实现动态控制
当需要更灵活的权限判断（比如按环境、用户角色开关写权限），Proxy 是更通用的选择：
- 原始数据存在闭包里，不暴露给外界
- Proxy 的
get始终放行，set拦截并拒绝所有写入 - 内部保留一个受信的更新函数，绕过 Proxy 直接改闭包数据
这样既保持了 API 简洁（像普通对象一样用），又实现了强隔离：
function createReadOnlyConfig(initial) {
let data = { ...initial };
<p>return new Proxy({}, {
get(_, key) {
return data[key];
},
set() {
throw new Error('Config is read-only');
}
});
}</p><p>const config = createReadOnlyConfig({ version: '1.2.0' });
console.log(config.version); // ✅ 正常读取
config.version = '2.0.0'; // ❌ 报错</p>
结合 Object.defineProperty 控制单属性行为
如果只需锁定某几个关键字段（比如配置中的 env 或 mode），用 Object.defineProperty 更轻量：
- 只对目标属性设
writable: false和configurable: false - 搭配
get可做格式转换或懒计算（比如把字符串转成大写再返回） - 注意：它不阻止修改嵌套对象属性，所以适合扁平结构或已冻结的子对象
示例：
const config = { env: 'prod', features: { darkMode: true } };
<p>Object.defineProperty(config, 'env', {
get() { return this._env || 'dev'; },
set(val) { /<em> 不实现，或抛错 </em>/ throw new Error('env is read-only'); },
enumerable: true,
configurable: false
});</p><p>// 外部读取正常
console.log(config.env); // 'prod'</p><p>// 外部写入无效或报错
config.env = 'test'; // 静默失败 or TypeError</p>
与响应式框架协同时的注意事项
在 Vue 或 React 中，不能只靠存取描述符就解决响应性问题：
- Vue 的
readonly()是响应式系统的一部分，它返回的代理对象支持依赖追踪，但禁止写入 - 若用自定义 getter，需确保返回值是响应式来源（如 ref 或 reactive），否则模板不会自动更新
- 推荐组合：用
readonly(reactive(...))做主干，再用 computed 包一层派生只读状态，语义更清晰
例如：
import { reactive, readonly, computed } from 'vue';
<p>const state = reactive({ count: 0, name: 'App' });</p><p>// 主配置只读
export const config = readonly(state);</p><p>// 派生只读字段（带逻辑）
export const displayName = computed(() => config.name.toUpperCase());</p>
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
