我可以在 Vue.Js 中的计算属性中传递参数吗？

javascript vue.js vuejs2

2022-08-29 23:58:27

这是否可以在 Vue.Js 的计算属性中传递参数。我可以看到，当 getters/setter 使用 computed 时，它们可以获取一个参数并将其分配给变量。就像这里从文档：

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
  
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

这是否也有可能：

computed: {
  fullName: function (salut) {
    return salut + ' ' + this.firstName + ' ' + this.lastName    
  }
}

其中，计算属性采用参数并返回所需的输出。但是，当我尝试此操作时，我收到此错误：

vue.common.js：2250 Uncaught TypeError： fullName is not a function（...）

我应该在这种情况下使用方法吗？

答案 1

最有可能的是，您想使用一种方法

<span>{{ fullName('Hi') }}</span>

methods: {
  fullName(salut) {
      return `${salut} ${this.firstName} ${this.lastName}`
  }
}

更长的解释

从技术上讲，您可以将计算属性与如下参数一起使用：

computed: {
   fullName() {
      return salut => `${salut} ${this.firstName} ${this.lastName}`
   }
}

（感谢您的基本代码。Unirgy

计算属性和方法之间的区别在于，计算属性被缓存，并且仅在其依赖项更改时才更改。每次调用方法时都会对其进行评估。

如果需要参数，在这种情况下，使用计算属性函数通常比使用方法没有任何好处。虽然它允许你将一个参数化的getter函数绑定到Vue实例，但你失去了缓存，所以实际上没有任何收获，事实上，你可能会破坏反应性（AFAIU）。您可以在 Vue 文档 https://v2.vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

唯一有用的情况是，当您必须使用 getter 并需要对其进行参数化时。例如，这种情况发生在Vuex中。在 Vuex 中，这是从存储中同步获取参数化结果的唯一方法（操作是异步的）。因此，Vuex官方文档为其获取者列出了这种方法 https://vuex.vuejs.org/guide/getters.html#method-style-access

答案 2

您可以使用方法，但如果计算属性不会改变数据或没有外部影响，我仍然更喜欢使用计算属性而不是方法。

你可以通过这种方式将参数传递给计算属性（不记录，但由维护者建议，不记得在哪里）：

computed: {
   fullName: function () {
      var vm = this;
      return function (salut) {
          return salut + ' ' + vm.firstName + ' ' + vm.lastName;  
      };
   }
}

编辑：请不要使用此解决方案，它只会使代码复杂化而没有任何好处。