computed 默认返回只读 ref，但仅阻止直接赋值，不保护底层响应源；真正实现安全只读传递需用 readonly 显式包裹，尤其在跨组件、逻辑复用时应统一在组合式函数内封装。
Vue 3 中的计算属性本身默认就是只读的（除非显式定义 set），但在组合式 API 场景下，若需将计算结果作为“不可被外部修改”的响应式值安全传递（尤其跨组件、逻辑复用或注入时），关键不在于计算属性本身是否可写，而在于**如何防止接收方意外或强行修改其底层响应源**。真正起保护作用的是 readonly，它才是实现“只读状态传递与保护”的核心手段。
computed 返回值天然只读，但不等于底层数据受保护
使用 computed 创建的 ref，默认返回的是一个只读的 ref（内部是 readonly 包装的 proxy）。这意味着你不能直接给它赋新值：
const fullName = computed(() => user.firstName + ' ' + user.lastName)-
fullName.value = 'John Doe'→ 会报错：Cannot assign to read only property
但这只是阻止了对 fullName 本身的赋值。如果接收方拿到的是 user（比如从 reactive 创建的对象），仍可修改 user.firstName，从而间接改变 fullName 的值。所以“只读”仅限于计算属性这一层，不是对源头的锁定。
用 readonly 包裹 computed 结果，强化只读语义
当需要向子组件、插件或外部逻辑暴露一个“绝对禁止修改”的计算结果时，应显式用 readonly 再包裹一次。虽然 computed 已自带只读性，但双重保障更清晰，且能防止某些误操作（如解构后尝试赋值）：
import { computed, readonly } from 'vue'const safeName = readonly(computed(() => state.name.toUpperCase()))- 传给子组件：
<child :title="safeName"></child> - 子组件中即使解构：
const { value } = title，也无法通过value = ...修改 —— 因为value是只读 proxy 的属性
在组合式函数中统一封装只读计算逻辑
若多个组件共用同一套计算逻辑（如权限判断、格式化金额），建议在组合式函数内完成 readonly 封装，避免调用方自行处理：
- 定义
useUserInfo函数： export function useUserInfo(user) {const displayName = computed(() => user.nickname || user.email.split('@')[0])return {displayName: readonly(displayName), // 显式只读isAdmin: readonly(computed(() => user.roles?.includes('admin')))}}
这样使用者拿到的就是已加固的只读响应式值，无需关心底层是否可变，也杜绝了意外修改风险。
注意 ref 与 reactive 的边界保护
只读保护必须作用于最终暴露的响应式引用，而非原始数据源：
- ❌ 错误做法：只对原始对象用
readonly，却把computed基于它创建的 ref 直接暴露 - ✅ 正确做法：无论源头是
ref还是reactive，只要计算结果要对外传递，就用readonly(computed(...)) - 特别提醒：
shallowReadonly不适用于computed结果，因为它只做浅层冻结，而computed返回的是单个 ref，无嵌套结构，用readonly即可
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
