Vue 3 - 如何重命名通过 toRefs() 公开的保留关键字？

Question

使用 Vue 3 的 Composition API，是否可以在使用 toRefs() 时重命名保留关键字？

[vue/no-parsing-error]解析错误：关键字'package'被保留。

setup(){
    const data = reactive<Foo>({
        ...
        package: {
            ...
        }
    })
    return { ...toRefs(data) }
}

<template>
    {{ package.bar }}
</template>

Answer 1

Linter 错误具体指的是 {{ package.bar }} 而不是直接指向对象键，这是允许的。 toRefs 正在使用并不重要，因为它已经是讨论中有属性的普通对象并且本身不是反应式的：

{ ...toRefs(data) }

可以以 JavaScript 中可用的任何方式为对象属性分配不同的名称，例如使用浅拷贝：

const { package: packageItem, ...dataRefs } = toRefs(data);
return { packageItem, ...dataRefs };

Vue 3 - How to rename reserved keyword exposed via toRefs()?