上QQ阅读APP看书，第一时间看更新
2.4 计算属性
本章将介绍Vue的计算属性，使用计算属性可以实现对数据的实时计算，为开发带来便捷。常见的使用场景为购物车模块开发等。
1．computed计算属性
在实际开发中，往往会让用户在一个输入框中填写姓，再到另一个输入框填写名，此时想要实时得到用户的完整姓名，就可以借助计算属性，代码如下：
注意 在计算属性computed中定义过的字段，不能在data中重复定义。
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。