在 Vue 3 Options API 中，直接对 props 赋值或在 created 中用 reactive() 包装 modelValue 会导致响应失效；应改用 computed 双向绑定或统一使用 Composition API，避免 data 与 reactive() 混用引发冲突。
在 vue 3 options api 中，直接对 `props` 赋值或在 `created` 中用 `reactive()` 包装 `modelvalue` 会导致响应失效；应改用 `computed` 双向绑定或统一使用 composition api，避免 `data` 与 `reactive()` 混用引发冲突。
Vue 3 的响应式系统相比 Vue 2 有根本性变化：reactive() 是 Composition API 的核心工具，不应在 Options API 的 created 钩子中直接调用——这不仅违背设计约定，更会因生命周期时机和响应式代理机制不匹配，导致对象“看似更新实则回滚”的诡异行为。
你代码中的关键问题有三处：
data()与reactive()冲突
同时在data()中声明block: {}，又在created()中执行this.block = reactive(this.modelValue)，造成 Vue 对block的响应式追踪混乱（data声明的属性默认被defineProperty处理，而reactive()返回的是Proxy实例），最终表现为block在updateImage()中短暂更新后立即“重置”。method:拼写错误method:应为methods:，否则updateImage根本不会被注册，导致事件监听失效（尽管你观察到console.log执行，但实际可能来自其他上下文）。-
错误地在 Options API 中混用 Composition API 工具
reactive()设计用于setup()返回值或<script setup></script>中的顶层变量。在created中调用它，既无法保证响应式依赖正确收集，也无法与 Vue 3 的依赖追踪系统协同工作。立即学习“前端免费学习笔记（深入）”；
✅ 推荐解决方案：使用 computed 实现响应式双向绑定
<script>
import { EventBus } from '@/utils/event-bus' // 确保路径正确
export default {
name: 'RWImage',
props: {
modelValue: {
type: [Array, Object],
default: () => ({})
}
},
computed: {
// ✅ 基于 modelValue 构建响应式 block，天然同步、无副作用
block: {
get() {
return this.modelValue
},
set(newVal) {
// 触发 v-model 更新，父组件自动响应
this.$emit('update:modelValue', newVal)
}
}
},
mounted() {
EventBus.on('asset-chosen', this.updateImage)
},
beforeUnmount() {
// ⚠️ 必须清理事件监听，防止内存泄漏
EventBus.off('asset-chosen', this.updateImage)
},
methods: {
updateImage(data) {
if (this.$.uid === data.uid) {
// ✅ 直接修改 computed setter，触发响应式更新链
this.block = {
...this.block,
src: data.asset.secure_url,
cloudinaryId: data.asset.public_id,
cloudinary: data.asset
}
console.log('Updated block:', this.block)
}
}
}
}
</script>? 为什么 computed 更可靠？
-
get()确保子组件始终读取最新modelValue（响应式依赖自动追踪）； -
set()封装update:modelValue发射逻辑，语义清晰且与v-model完全对齐； - 避免手动管理
reactive对象生命周期，杜绝代理丢失、响应中断等问题。
? 额外建议
- 若项目已大规模采用 Composition API，建议重构为
<script setup></script>形式，用defineModel()（Vue 3.4+）或useVModel()（VueUse）进一步简化：<script setup> import { useVModel } from '@vueuse/core' const props = defineProps(['modelValue']) const emit = defineEmits(['update:modelValue']) const block = useVModel(props, 'modelValue', emit) </script> - 始终在
beforeUnmount中移除全局事件监听，这是 Vue 3 的强制最佳实践。
总结：Vue 3 的响应式不是“越 reactive 越好”，而是要匹配 API 范式。放弃在 Options API 中硬套 reactive()，拥抱 computed 的声明式双向绑定，是解决此类问题最简洁、最稳定的方式。
