Vue中computed属性简介

计算属性用于使代码更易于使用。这使我们的模板代码更具可读性；我们使用该属性来减少我们在模板中编写的复杂或模糊的逻辑。如果我们有简单的逻辑，如字符串连接或布尔表达式，我们可以使用内联表达式或插值，但对于更复杂的逻辑，我们应该选择 Vue.js 中的计算属性。

语法：
我们需要使用 ‘computed’ 关键字来使任何函数充当计算属性以使用此属性。如需了解更多信息，请参见下文。

computed: {
functionName: function () {
//logic will be goes here.
//
}
}

在上面的语法中，我们使用了 computed 关键字，在其中，我们定义了需要计算的函数。我们用它来编写更复杂的逻辑，比如我们需要在成功连接字符串后对字符串调用 reverse 方法。我们将在下一节中更详细地看到它的工作原理。

Vue.Js 中的计算属性如何工作？

到目前为止，我们知道我们正在使用这个计算属性来处理模板上更复杂的逻辑。我们将看到一个示例，说明何时需要计算属性。让我们看一个例子，我们连接两个字符串并尝试在其上调用大写方法，然后调用反向方法（）；请参阅一个实践示例以更好地理解。
例子：

<div>
<span>{{msg +' calling other methods as well '.toUpperCase().reverse()}}</span>
</div>

在上面的例子中，我们试图显示一条我们试图转换为大写的消息，然后调用 reverse 方法。但这使得这里的模板看起来非常复杂，而且如果我们在 js 中还有其他方法，它会调用该方法两次。此外，我们在这里将消息与静态字符串连接起来。但正如我们所知，模板应该是声明性的、简单的、易于阅读且稳定的，但是在这里，通过调用多个函数并执行字符串连接，我们正在使我们的模板更复杂的计算属性进入画面。这个属性是声明性的，如果我们有两个变量，其中一个变量取决于另一个变量的值，那么我们应该这样做。它使我们的模板和代码更受数据驱动、更易于维护和声明性。
例子：

HTML code:
<div>
<span>{{msg}}</span>
<span>{{computedText}}</span>
</div>
Js Code :
computed: {
computedText: function () {
return this.msg.toUpperCase().reverse();
}
}

在上面的代码行中，我们这里有两个不同的文件：一个是 HTML，另一个是 Js 文件。Out HTML 文件包含模板逻辑，而 Js 文件包含计算属性逻辑。在 html 文件中，我们正在显示的这条消息上有两个不同的文本，另一个是我们尝试使用计算属性函数显示的计算消息。我们已经定义了一个名为“computedText”的函数，该函数将执行我们之前在模板中编写的剩余逻辑。到目前为止，我们已将其移至 js 中，并将它们作为执行逻辑的单个函数。我们使用了 computed 关键字来定义它；此外，我们将消息命名为“computedText”或将其命名为“computedText”，它将以大写形式返回消息，并以与原始相反的顺序返回。所以这是上面的模板；我们可以很容易地阅读它，它也是数据驱动的，这使得我们的代码对其他人来说更具可读性和稳定性。但是在这里，您已经注意到我们可以简单地调用方法而不是创建计算属性。
如下所示:

<div> {{method()}} </div>

因为计算属性是基于缓存的，这意味着它们只会在反应性依赖项发生任何变化时才计算值，但是对于它们不是基于缓存的简单方法，情况并非如此，因此它们无论是否进行了更改，每次都会调用。
我们也可以考虑使用 watch 来代替计算属性，但是代码会很复杂并且不容易维护。此外，手表的代码是强制性的，有时也是重复的，因此我们建议您使用计算属性。

结论
计算属性使代码数据驱动，易于理解、维护和声明性。这有助于从模板中删除复杂的逻辑，而且它是基于缓存的，因此它也使事情变得更快。它比手表好。通过使用这一点，我们可以使我们的模板对其他人来说越来越具有声明性和易用性。