vue项目中computed用法讲解

计算属性出现的目的是解决模板中放入过多的逻辑会让模板过重且难以维护的问题.

计算属性是根据data中已有的属性，计算得到一个新的属性.

下面，我们可以通过一个案例来学习一下计算属性、

在一个文本框中输入第一个名字，第二个文本框中输入第二个名字，然后展示全部名称。

了解了计算属性后，下面对用户列表添加一个功能，要求是计算总人数。

可以在ul列表下面，添加如下的代码。

最终展示出了，对应的人数，但是这里在模板中做了运算（在这里做了字符串拼接，虽然计算简单，但是最好还是通过计算属性来完成），为了防止在模板中放入过多的逻辑计算，这里可以使用计算属性来解决。

下面对代码进行改造：

 计算属性实现

通过上面的代码，可以看到使用计算属性，让界面变得更加的简洁。

使用计算属性还有一个好处：

其实细心的话就会发现，调用methods里的方法也能实现和计算属性一样的效果，既然使用methods就可以实现，那为什么还需要计算属性呢？原因就是计算属性是基于他的依赖缓存的（所依赖的还是data中的数据）。一个计算属性所依赖的数据发生变化时，他才会重新取值

也就是说：只要相关依赖没有改变，对此访问计算属性得到的是之前缓 存的结果，不会多次执行。

下面我们测试一下：

在上面的代码中，我们使用total了两次。

下面在看一下关于计算属性中的代码修改：

这里，我们通过console输出字符串aaa,但是在控制台上只是输出了一次，因为，第二次使用total的时候，发现值没有变化，所以直接从缓存中获取了对应的值。并没有重新进行计算，这样带来的好处就是，性能得到了提升。

下面，我们换成methods函数的形式来看一下：

在上面的代码中，调用了两次getTotal方法。

getTotal方法的实现如下：

 

实现的方式是差不多的，但是这里却执行了两次。（注意：由于本案例中给每一个li标签添加了*@mousemove*,所以只要鼠标移动到列表上，就会导致页面重新渲染，这时会不断的调用getTotal方法。）

所以通过上面案例的演示，可以明确的看出计算属性是有缓存的，也就是所依赖的data属性中的数据没有变化，那么是不会重新计算的。所以提升了对应的性能。

所以说，在进行大量耗时计算的时候，建议使用计算属性来完成。

如下代码：

 

 在data中定义了num 属性，并且初始值为100、

下面在计算属性中进行求和的运算，代码实现如下：

 通过演示，可以发现计算属性只是在第一次调用的时候，执行了一次，后续由于所依赖的数据num没有发生变化，所以即时调用多次，也并没有重新进行计算，而是获取上次计算的结果，所以说在进行大量耗时计算的时候，通过计算属性可以提升性能。

========================================================================

例子：将一个返回值存在conputed里面，在模板渲染时可以直接(遍历)使用。

举例说明：

从服务器获取数据7条，而渲染只需要5条

1.在计算属性中写出返回值

2.在模板使用中直接遍历使用