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

Question

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

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(…)

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

原文由 Saurabh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 官方文档为它的 getter 列出了这种方法

https://vuex.vuejs.org/guide/getters.html#method-style-access

原文由 damienix 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

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

原文由 Unirgy 发布，翻译遵循 CC BY-SA 4.0 许可协议