光脚丫思考Vue3与实战：第05章 计算属性和侦听器 第01节 计算属性

下面是本文的屏幕录像的在线视频：

温馨提示：

1、视频下载：线上视频被压缩处理，可以下载高清版本：

链接：https://pan.baidu.com/s/1MiGKmrzp40i1ZD_4borteQ 提取码：wc59 

2、示例代码：https://pan.baidu.com/s/1rCqbY_j35FcRWRZbuOfHqg 提取码：79kh 

下图是文章大纲：

一、概述

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。

二、基础例子

如下代码所示，是计算属性的几个基本的示例代码。

示例代码：01-Overview.html
访问该页面会返回如下的内容：

计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。
这里我们声明了一个计算属性reversedMessage。我们提供的函数将用作属性vm.reversedMessage的getter函数：

示例代码：01-Overview.html
你可以打开浏览器的控制台，自行修改例子中的vm.reversedMessage的值始终取决于vm.message的值。
你可以像绑定普通属性一样在模板中绑定计算属性。Vue知道vm.reversedMessage依赖于vm.message，因此当vm.message发生改变时，所有依赖vm.reversedMessage的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的getter函数是没有副作用(side effect)的，这使它更易于测试和理解。

三、计算属性的访问器

计算属性默认只有getter，不过在需要时你也可以提供一个setter。如下代码所示：

示例代码：02-Setter.html
此处的代码给fullName的计算属性添加了get访问器和set访问器，分别用来获取属性值，和设置属性值的。上面的代码运行后，网页上显示的内容如下图所示：

可以看到，通过fullName计算属性将firstName和lastName的内容合并到了一起。并且，当firstName和lastName数据项中的任何一个发生改变，计算属性fullName也会自动同步改变。
接下来我们看下计算属性的set访问器是怎么运行的。将上述中注释的那行代码取消注释。如下图：

示例代码：02-Setter.html
做好上面的修改之后，再次打开页面，网页上显示的内容应该如下图所示：

这说明，我们可以给计算属性增加set访问器，并且可以通过该set访问器对原始的数据项进行修改。这样就算完整了！
绝大多数情况下，我们只会用默认的getter方法来读取一个计算属性，在业务中很少用到setter，所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter和setter都声明。

四、计算属性缓存vs.方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果。如下的代码所示：

示例代码：03-Method.html
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新，因为Date.now()不是响应式依赖：

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于A。如果没有缓存，我们将不可避免的多次执行A的getter！如果你不希望有缓存，请用方法来替代。
总结：如果希望使用缓存的机制以提升性能开销，则使用计算属性，否则就使用方法。

五、参考资料

• https://v3.vuejs.org/guide/computed.html
• https://cn.vuejs.org/v2/guide/computed.html
  书籍《Vue.js实战》第04章 v-bind及class与style绑定 第02节 绑定class的几种方式