VueJS：是否可以将扩展运算符用于计算属性？

Question

我只是想知道我是否可以将下面的代码做得不那么难看。

在组件中，我有一个属性person。我想person在模板中使用对象的字段，而无需在每个字段前面加上person.something. 但我知道的唯一方法是在下面。

这是我有 atm：

（请把下面的代码当作一个例子，它不是真实的）

{
  name: 'Demo',
  props: {
    person: {
      type: Object,
      default: {}
    }
  },
  computed: {
    firstName() {
      return this.person.firstName
    },
    lastName() {
      return this.person.lastName
    },
    age() {
      return this.person.age
    },
    gender() {
      return this.person.gender
    }
  }
}

这就是我想要的（有点）：

{
  name: 'Demo',
  props: {
    person: {
      type: Object,
      default: {}
    }
  },
  computed: {
    ...this.person // <-- something like this would be better if only it would work
  }
}

一些假设

我认为这样的事情应该是可能的，因为我们有mapGettersvuex：

 computed: {
    ...mapGetters({ something: SOMETHING })
  },

Answer 1

使用 vue 3 或 vue 2 的composition api 插件，您可以使用在钩子toRefs内传播 prop 值setup：

import {toRefs} from 'vue'//vue3
//import {toRefs} from '@vue/composition-api'//vue 2

export default{
  name: 'Demo',
  props: {
    person: {
      type: Object,
      default: {}
    }
  },
setup(props){

return {...toRefs(props.person)}
}

}