Question

与计算属性有关的几个问题如下：

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

他们在询问特定的错误或逻辑。许多网站都在解释有关vuejs的相关概念。我在vuejs官方网站上了解了计算属性。当我们执行复杂的计算或要避免在我们的html模板中编写更多逻辑时，我们将使用计算属性。

但是对计算属性，调用时，调用方式以及确切执行方式没有任何扎实的了解？

Answer 1

TL; DR ：计算的属性是Vue中的获取器/设置器。

以简写形式定义时，它们是吸气剂：

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

获取器：查找该属性时运行的函数；用法：

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

设置器：尝试分配该属性时运行的函数；用法：

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

详细了解Java语言中的getters和setters。

这是Vue computed properties上的文档。

Answer 2

例如，当您有一些逻辑会炸毁模板时，就可以使用计算属性。

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

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

AggregateException

或者是另一个很好的示例，如果您有某种货币，并且想要在其末尾加千位分隔符和欧元汇率来格式化它。

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

像这样：

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

每当您在有争议的道具中使用的任何变量发生变化时，vue vill都会照顾它，并将再次重新计算您的计算属性。

假设您具有以下条件：

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

每当货币或金额更改时，prettyAmount的输出也会更改。

vue.js中的计算属性到底是什么？

2 个答案: