什么是计算属性？
通过之前章节，已经可以搭建一个简单的Vue应用，在模板里双向绑定一些数据或者表达式。模板内的表达式是非常便利的，但是它们实际上只用于简单的运算，如果在模板里放入太多的逻辑会让模板过于臃肿且难以维护。所以 vue制定了一个computed 的选项我们称他为计算属性。用来放置过长的表达式和逻辑运算。
首先我们来看一下 运用计算属性的步骤
注意在使用计算函数的时候：
1、this—在构造函数中，访问本身方法时，需要利用this代表自身，去指向对应的方法和数据。
2、写法上类似于函数，调用时类似于属性，所以起名为计算属性
除了计算属性，可以通过在表达式中调用方法来达到同样的效果：
那么vue为什么还要多次一举 在多创建一个computed呢
下面我们将它调用两次看一下
通过上图 我们可以得知计算属性之会调用一次 而方法会调用两次
那么这是为什么呢？
1、计算属性是基于他们的依赖进行缓存的
2、计算属性只有在它的相关依赖发生改变时才会重新计算（改变才会重新计算，如果不改变情况下连续多次调用时，会发现不会再次调用该方法）
3、同个方法在不同界面可能调用多次，如果使用方法调用，则每次调用都会将复杂算法执行一次，浪费性能；
为什么需要缓存呢？
假设有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。
然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A ！如果不希望有缓存，可以用方法来替代。
综上所述，计算属性更高效一些，因为是基于依赖进行缓存。
计算属性缓存VS方法
使用 methods 来替代 computed，效果上两个是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
可以说使用 computed 性能会更好，但是如果不希望缓存，可以使用 methods 属性。
小结：相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
计算属性技巧
计算属性有两个实用的小技巧/特点
①计算属性可以依赖其他计算属性；
②计算属性不仅可以依赖当前vue实例的数据，还可以依赖其他实例数据
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，最终返回计算后的结果。
除了上例简单的用法，计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
01.html案例
01.html案例解析：
当package1或者package2中的商品有任何变化，比如购买数量变化或者删除商品时，计算属性money就会自动更新，视图中的总价也会自动变化。
getter与setter
计算属性包含getter和setter，上面实例都是计算属性默认用法，只是利用getter读取。此外也可以用setter函数，当手动修改计算属性的值就像修改普通数据时，便会触发setter函数，执行一些自定义操作（02.html、03.html）
侦听器/属性/观察者
简介：
除了计算属性，Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性/器。
通俗理解：
当vue实例数据发生变动，watch属性可以快速检测到改变的数据
接下来结合具体案例了解下watch侦听器属性。
接下来结合购物车案例了解下
首先写个基本的文档结构
分析：
需求：只要改动任意一项，总价都会发生更改。
这里首先需要获取输入框的值，此时需要用到双向数据绑定指令v-model，双向数据绑定指令也是VUE框架MVVM设计模式最为明显的一个特征“双向数据绑定”。
逻辑分析及监听验证：
当发现到单价和数量任意一个发生改变时，总价才会发生变动。
所以首先需要检测数据的变动，此时便可以用到watch侦听器属性。例如要监听单价price，则如下所示
计算属性setter与getter
小结
（1）使用计算属性还是methods取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
（2）因为侦听器watch相对繁琐，大多情况下推荐用计算属性computed选项处理即可。