Vue 3中将ref替换为reactive后修改对象失效如何解决？

问题原因 #

reactive返回的是被Proxy包装的响应式对象，你直接对selected变量进行重新赋值时，相当于把原来的Proxy引用替换成了普通的JS对象，丢失了响应式关联，所以视图不会触发更新。 #

修复方案 #

下面提供三种常用可落地的修复方式，适配不同的使用场景：

方案1：给reactive套一层外层对象（推荐，TS类型适配性好） #

不直接把单个对象作为reactive的参数，而是在外层包裹一个对象来固定Proxy引用，修改时只修改内层属性：

// 定义类型（提升TS类型安全，可根据你的实际属性调整结构）
import type { Component } from 'vue'
interface SelectedItem {
  label: string
  icon: string
  class: string
  component: Component
}
// 定义响应式状态
const state = reactive<{ selected: SelectedItem }>({
  selected: items[0]
})
// 修改逻辑
function select(value: SelectedItem) {
  state.selected = value
  emit('update:modelValue', value)
}

方案2：用Object.assign全量覆盖属性 #

如果你不想新增外层对象，可以用Object.assign把新值的属性合并到原有的reactive代理对象上，不会替换原有Proxy引用：

import type { Component } from 'vue'
interface SelectedItem {
  label: string
  icon: string
  class: string
  component: Component
}
// 定义响应式状态
const selected = reactive<SelectedItem>(items[0])
// 修改逻辑
function select(value: SelectedItem) {
  Object.assign(selected, value)
  emit('update:modelValue', value)
}

方案3：继续使用ref（无改造成本） #

ref本身对对象类型的值内部也是基于reactive实现的，而且原生支持直接替换.value的引用触发响应式更新，你原有逻辑没有问题，不需要硬切换为reactive写法。

内容的提问来源于stack exchange，提问作者Rade Iliev