vuejs 中的计算属性到底是什么？答案

【问题标题】：What exactly does computed properties in vuejs?vuejs 中的计算属性到底是什么？
【发布时间】：2019-09-10 22:36:35
【问题描述】：

有几个与计算属性相关的问题，如下所示

“vuejs 表单计算属性”
“VueJs 中的计算属性”
“VueJS 中的计算属性”
“在 Vuejs 的数据中使用计算属性”

他们询问具体的错误或逻辑。有很多网站都在解释 vuejs 相关的概念。我在 vuejs 官方网站上阅读了有关计算属性的信息。当我们进行复杂的计算或想要避免在我们的html 模板中编写更多逻辑时，我们会使用计算属性。

但是无法对计算属性、何时调用、如何调用、具体做什么有任何深入的了解？

【问题讨论】：

标签： vue.js vuejs2 computed-properties

【解决方案1】：

TL;DR：计算属性是 Vue 中的 getter/setter。

当以简写形式定义时，它们是 getter：

computed: {
  someComputed() {
    return `${this.foo} ${this.bar}`;
  }
}

等价于

computed: {
  someComputed: {
    get: function() {
      return `${this.foo} ${this.bar}`;
    }
  }
}

也可以有一个setter：

computed: {
  someComputed: {
    get: function() {
      return `${this.foo} ${this.bar}`;
    }
    set: function(fooBar) {
      const fooBarArr = fooBar.split(' ');
      this.foo = fooBarArr[0];
      this.bar = fooBarArr[1];
    }
  }
}

简而言之，Vue 计算属性允许您将实例属性绑定到

一个getter：当你查找该属性时运行的函数；用法：

this.someComputed // returns the computed current value, running the getter.

一个setter：当您尝试分配该属性时运行的函数；用法：

this.someComputed = value; // sets the computed current value, running the setter.

阅读更多关于 Javascript 中的 getters 和 setters 的内容。

这是Vue computed properties 上的文档。

【讨论】：

【解决方案2】：

当你有一些逻辑会破坏你的模板时，你可以使用计算属性。

想法是，通常您希望将所有 javascript 逻辑保留在 vue 组件的 javascript 端，并且只访问数据中的最终数据（如果可能）

为此，您可以使用计算道具，它们通常会做一些简单的事情，例如：

  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }

或者另一个很好的例子，如果你有一些货币并且你想在最后用千位分隔符和欧元 ign 格式化它。

然后您可以像访问普通道具一样访问模板中的计算道具，您不必将其作为函数调用。

像这样：

<div>{{reversedMesage}}</div>

每次，当你的计算属性中使用的任何变量发生变化时，vue vill 会处理它并重新计算你的计算属性。

假设您有以下内容：

  computed: {
    prettyAmount: function () {
      return this.amount + ' ' + this.currency.toUpperCase()
    }
  }

<div>{{prettyAmount}}</div>

每当货币或金额发生变化时，prettyAmount 的输出也会发生变化。

【讨论】：