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

Question

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

"vuejs form computed property"
"Computed properties in VueJs"
"computed property in VueJS"
"Use computed property in data in Vuejs"

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

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

Answer 1

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

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

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

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

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

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

像这样：

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

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

假设您有以下条件：

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

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

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

Answer 2

TL;DR：计算属性在 Vue 中是 getters/setters。

当以shorthand形式定义时，它们是getters:

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 计算属性允许您将实例属性绑定到

a getter: 当你查找属性时函数运行;用法：

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

a setter：当您尝试分配属性时函数运行；用法：

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

在 Javascript 中阅读有关 getters and setters 的更多信息。

这里是关于 Vue computed properties 的文档。

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

What exactly does computed properties in vuejs?

vue.js

computed-properties

vuejs2