Vue之计算属性computed（一）

Vue中什么是计算属性computed，计算属性的基础、计算属性computed与方法method实现相同的功能为什么选择计算属性。

在官方文档中为我们引出一个这个的例子：

在html标签元素中使用插值表达式能够使数据的处理变得更加的灵活，且是便利的，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

现在我们写出跟官网相同的例子这个例子是将data数据中msg中的字符串翻转：

原始数据 代码片段 结果图

会发现在HTML的模板语法中发现插值表达式的内容过于冗长，当如果需要处理的数据量多，处理过程复杂的逻辑运算，这样就会使的插值表达式中的代码量增多，给之前的字符后面增加一个大写的字符串就会发现我们的模板语言已经变得十分的厚重。

原始数据 代码图 效果图

如果我们之后的模板语言再次需要这个逻辑并且扩展就会加重模板语言的负担，我需要计算上面的字符串的长度是多少，代码如下：

代码图

我们应该需要知道Vue ，是一个构建数据驱动的 web 界面的渐进式框架

这样的观点使我们应该将重心放在用在数据的处理，而不是在模板语言。由此我们引入计算属性，以上的代码可以改写为：

html js

这样我们就把上面的插值表达式中的代码给汲取出来，这样我们的好处可以简化我们模板语言代码，并且我们生成了一个计算属性，这个属性可以在当前的Vue实例中通过this访问，并且代码清晰。

这个时候就会有人提出那我可以在插值表达式里面用方法来表示也是一样的效果

html js

这样跟上面的计算属性的效果不是一样的么？为什么还要多次一举呢，在官网中有这样解释：我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

计算属性是基于它们的响应式依赖进行缓存的

当我们重新渲染模板的时候如果你的计算属性中的响应式依赖没有改变计算属性会立刻返回之前的值，而不用去执行函数，这样就提高了我们的渲染你的效率，什么是响应式依赖，在上面的例子中可以认为是msg以及pre、还有生成的newString对于newStringLength也是响应式依赖

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。