Vue3 Composition API使用computed重命名深层嵌套属性不生效如何解决？

• 核心错误：两个方案中的computed回调函数都没有添加return语句，仅执行了取值操作没有返回结果，导致computed实例的值始终为undefined，无法正常生效。
• 潜在风险：直接按tmp.value.k1.k2.k3链式调用，若tmp初始化时value为空、或者k1/k2任意一层属性未初始化，会直接抛出属性读取错误，导致页面白屏。

方案1：修复computed写法（最通用） #

补全computed的return逻辑，同时添加可选链和默认值做兼容处理：

// 简写形式：单表达式箭头函数默认返回表达式结果
const k3_arr = computed(() => tmp.value?.k1?.k2?.k3 ?? [])

// 完整写法
// const k3_arr = computed(() => {
//   return tmp.value?.k1?.k2?.k3 ?? []
// })

return { k3_arr }

方案2：用toRef取深层响应式属性（性能更优） #

不需要额外创建计算属性，直接用toRef绑定深层属性，保持响应式关联，性能开销比computed更低：

import { toRef } from 'vue'

// 直接绑定k3属性，后续tmp.value.k1.k2.k3更新时k3_arr会同步更新
const k3_arr = toRef(tmp.value?.k1?.k2 ?? {}, 'k3')

return { k3_arr }

• 以上两种方式得到的k3_arr都是ref类型，在setup内部读取/修改值需要加.value，在template模板中直接使用即可，不需要加.value。
• 如果你需要的是数组副本而非响应式关联，才需要直接赋值const k3_arr = tmp.value.k1.k2.k3，但这种写法会丢失响应式更新能力。

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