2.4　计算属性

本章将介绍Vue的计算属性，使用计算属性可以实现对数据的实时计算，为开发带来便捷。常见的使用场景为购物车模块开发等。

1．computed计算属性

在实际开发中，往往会让用户在一个输入框中填写姓，再到另一个输入框填写名，此时想要实时得到用户的完整姓名，就可以借助计算属性，代码如下：

2．computed的getter与setter

在Vue.js文件中定义每个属性都使用Object.defineProperty()方法，该方法会为属性追加get()方法与set()方法，一般称为getter和setter。

getter主要用来返回数据结果，setter的作用则是当该属性的值发生变化时，可以对外触发事件操作。

针对上述代码示例，可以使用getter与setter进行改写，代码如下：

3．computed与methods的区别

computed可以计算一个值，methods同样可以计算一个值，代码如下：

那么，computed能完成的事情，methods也能完成，为什么还需要methods呢？原因是computed有缓存，而methods没有，在一个实例中，当同一个computed属性被多次调用时只会执行一次方法。而methods中的方法，调用一次就执行一次，不存在缓存。从性能上来讲，同一个计算需求若computed与methods都能完成，则优先选择computed。

本节主要讲解了computed计算属性，以及它的getter与setter，同时也对比了computed与methods。 Bgsyn1iw8tQpe1Vuq8ns1+rblGlNsQIJ65J6/plRVvpBIL5pmYwafZAWdZZDgYIJ