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

问题描述

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

is this possible to pass parameter in computed properties in Vue.Js. I can see when having getters/setter using computed, they can take a parameter and assign it to a variable. like here from documentation:

// ...
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
  }
}
// ...

其中计算属性接受一个参数并返回所需的输出.但是，当我尝试此操作时，出现此错误:

Where computed property takes a argument and returns desired output. However when I try this, I am getting this error:

vue.common.js:2250 Uncaught TypeError: fullName is not a function(...)

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

Should I be using methods for such cases?

推荐答案

很可能你想使用一个方法

Most probably you want to use a method

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

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

---

详细解释

从技术上讲，您可以使用具有如下参数的计算属性:

---

Longer explanation

Technically you can use a computed property with a parameter like this:

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

(感谢 Unirgy 为此提供基本代码.)

(Thanks Unirgy for the base code for this.)

计算属性和方法之间的区别在于计算属性会被缓存，并且仅在它们的依赖项发生变化时才会发生变化.方法将在每次调用时进行评估.

The difference between a computed property and a method is that computed properties are cached and change only when their dependencies change. A method will evaluate every time it's called.

如果您需要参数，在这种情况下使用计算属性函数通常没有好处.尽管它允许您将参数化的 getter 函数绑定到 Vue 实例，但您会丢失缓存，因此实​​际上没有任何收益，事实上，您可能会破坏反应性 (AFAIU).您可以在 Vue 文档 https://vuejs 中阅读更多相关信息.org/v2/guide/computed.html#Computed-Caching-vs-Methods

If you need parameters, there are usually no benefits of using a computed property function over a method in such a case. Though it allows you to have a parametrized getter function bound to the Vue instance, you lose caching so not really any gain there, in fact, you may break reactivity (AFAIU). You can read more about this in Vue documentation https://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

The only useful situation is when you have to use a getter and need to have it parametrized. For instance, this situation happens in Vuex. In Vuex it's the only way to synchronously get parametrized result from the store (actions are async). Thus this approach is listed by official Vuex documentation for its gettershttps://vuex.vuejs.org/guide/getters.html#method-style-access

这篇关于我可以在 Vue.Js 的计算属性中传递参数吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！