计算属性 setter 本身不直接用于跨组件通信，仅支持计算属性被赋值并间接触发状态更新；真正起作用的是其配合响应式系统与数据流方案（如 v-model、provide/inject 等）实现状态同步。
计算属性的 setter 本身不直接用于跨组件通信，它只是让一个计算属性支持被赋值，从而间接触发内部状态更新。真正在组件通信中起作用的是：通过 setter 修改响应式数据，再借助 Vue 的响应式系统 + 合理的数据流设计（如 props / emit、v-model、provide/inject 或状态管理），实现跨组件的状态同步与修改。
用计算属性 setter 封装 v-model 双向绑定逻辑
这是最常见也最推荐的用法。父组件通过 v-model 传入值，子组件用带 setter 的计算属性桥接 prop 和事件，保持双向同步语义清晰。
例如子组件接收 modelValue prop，通过计算属性暴露 v-model 接口：
export default {
props: ['modelValue'],
emits: ['update:modelValue'],
computed: {
value: {
get() {
return this.modelValue
},
set(val) {
// 触发父组件更新
this.$emit('update:modelValue', val)
}
}
}
}
父组件使用时就和原生表单一样自然：
<ChildComponent v-model="parentData" />
配合 provide/inject 实现深层嵌套组件的状态透传与修改
当多个层级组件需要共享并修改同一状态时，可将状态和修改方法一起注入。计算属性 setter 在注入的作用域内封装修改逻辑，避免层层 $emit。
- 祖先组件
provide一个响应式对象（或组合式 API 中的 reactive）和更新函数 - 任意后代组件
inject后，定义计算属性setter调用该更新函数 - 这样所有组件都能“看起来在改同一个值”，实际由统一逻辑控制
注意：不要在 setter 里直接修改 inject 来的对象属性（除非是 reactive），否则可能破坏响应性；应始终走注入的更新方法。
避免直接用 setter 触发跨组件副作用（比如调用另一个组件的方法）
计算属性本质是派生状态，setter 应只负责“设置本组件能控制的状态”，不该承担通信调度职责。以下做法不推荐：
- 在
setter里调用this.$refs.otherComp.doSomething() - 在
setter里手动触发自定义事件去通知无关组件 - 在
setter中直接修改其他组件的 data 或 store 状态（绕过规范流程）
这类操作会让数据流混乱、难以调试，也违背响应式设计原则。应该把副作用提取到 methods 或 setup 中，由明确的用户交互或生命周期触发。
组合式 API 中的等价写法（defineModel 更简洁）
Vue 3.4+ 支持 defineModel 宏，自动创建带 getter/setter 的计算属性，大幅简化 v-model 封装：
const model = defineModel()
// 等价于：
// computed({
// get() { return props.modelValue },
// set(v) { emit('update:modelValue', v) }
// })
还可加参数定制事件名、默认值、类型校验等，比手写 setter 更安全、更语义化。
