javascript - 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 并不重要，因为它已经是普通对象，具有正在讨论的属性并且本身不是 react 性的:

{ ...toRefs(data) }

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

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