Vue3中如何结合Computed与Destructuring assignment实现响应式取值？

针对你遇到的问题，这里提供两种直接可行的方案，满足你既想直接使用name字段又保持响应式的需求：

方案一：直接为目标字段创建计算属性 #

如果只需要name这一个字段，这是最简洁的方式，直接把name作为计算属性返回：

const index = ref('child1')

const children = {
    child1: { name:'foo' },
    child2: { name:'bar' },
}

// 直接创建响应式的name计算属性
const name = computed(() => children[index.value].name)

使用时，模板中可以直接写{{ name }}，脚本中通过name.value访问，完全保持响应式——当index切换为child2时，name会自动更新为bar。

方案二：结合reactive+toRefs处理多字段场景 #

如果需要解构多个字段（比如除了name还有其他属性），可以用这种方式：

const index = ref('child1')

const children = {
    child1: { name:'foo', age: 10 },
    child2: { name:'bar', age: 20 },
}

// 创建响应式状态，存储当前选中的子对象
const state = reactive({
    currentChild: children[index.value]
})

// 监听index变化，更新选中的子对象
watch(index, (newIndex) => {
    state.currentChild = children[newIndex]
})

// 解构出响应式的字段
const { name, age } = toRefs(state.currentChild)

这里通过reactive创建响应式状态，配合watch监听index的变化来更新currentChild，最后用toRefs把currentChild的属性转为独立的响应式ref，这样解构出来的name、age都能保持响应式。

为什么之前的尝试不生效？ #

• 场景1直接解构普通对象的属性，本质是一次性赋值，不会跟踪index的变化，自然没有响应式。
• 场景2中的child是响应式ref，但直接解构child.value会取出当前时刻的普通属性值，这些值不具备响应式能力，所以无法自动更新。

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