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

Posted 2023-02-22

【中文标题】VueJS：是不是可以将扩展运算符用于计算属性？

【英文标题】：VueJS: Is it possible to use spread operator for computed properties?VueJS：是否可以将扩展运算符用于计算属性？

【发布时间】：2021-10-10 07:23:49

【问题描述】：

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

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

这是我的自动取款机：

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

  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
  

一些假设

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

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

【问题讨论】：

它不起作用 - 计算属性必须是一个函数或一对 getter/setter。扩展运算符可以使用 inside 计算属性 - 但在您的情况下，将 person 对象作为一个整体使用会更简单。

【参考方案1】：

使用 vue 3 或 vue 2 的组合 API 插件，您可以使用 toRefs 在 setup 挂钩内传播 prop 值：

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)

【参考方案2】：

我明白你的意思，但你想要的是不可能的。

主要问题是this。我们使用选项 API。 computed 是什么？传递给 Vue 的对象和 Vue 为 computed 对象内的每个函数（或 get/set 对）创建具有计算属性的新实例。这意味着扩展运算符在组件实例尚不存在时执行，这意味着不存在this

mapGetters 有效，因为它的输入只是静态字符串。如果您对 Person 对象有一些静态描述 - 例如从 Open API 规范生成的一些模式 - 您可以创建 mapProperties 帮助器并使用它来生成计算道具...

编辑： 是的，有一种方法可以通过修改$options object 在beforeCreate 中动态创建计算道具 - 至少在 Vue 2 中是可能的。不确定 Vue 3。在这两种情况下，它都被记录为只读，而 Vue 3 是以某种方式更严格地强制“只读”。但是，这与您的问题中的方法非常不同...

该方法以here为例进行演示

【讨论】：

我明白了……这很可惜。但只是好奇，理论上可以动态创建计算属性（可能在beforeCreated 内部）。所以理论上我认为可以创建一个像mapGetters 这样的函数来包装对象的字段并添加它们......但这肯定是一团糟

@spabn 是的，这种方法是可能的（更新了我的答案），但它也有缺点。例如，使用这种方法的组件要求在创建组件时 person 属性值必须是“完整的”——而不是 null（通常使用异步），以后不要添加属性等。而且代码的可读性也较低。我觉得不值得……