计算属性：
1、定义：要用的属性不存在，要通过已有属性计算得来。
2、原理：底层借助了object.defineproperty方法提供的getter和setter。
3、get函数什么时候执行？
（1）初次读取时会执行一次。
（2）当依赖的数据发生改变时会被再次调用。
4、优势：与methods实现相比，内部存在缓存机制（复用），效率更高，调试方便。
5、备注：
（1）：计算属性最终会出现在vm上，直接读取使用。
（2）：如果计算属性要被修改，那必须写set函数去响应修改。
<body><div class="a" id="a">省：<input type="text" v-model="province"> <br><br>市：<input type="text" v-model="city"> <br><br>位置：<span>{{ area }}</span> <br><br>修改位置：<input type="text" v-model="area"></div><script>var vm = new Vue({el: '#a',data: {province : '云南',city : '昆明',},computed:{area:{get(){console.log('get方法被调用')return this.province + '-' + this.city},set(area){console.log('set方法被调用')const arr = area.split('-')this.province = arr[0]this.city = arr[1]}}}})</script>
</body>省和市通过绑定v-model事件实现数据的双向绑定，而所在位置的信息并不在data数据中，这就是所需的数据不存在，所以用到了计算属性来计算得到，当然也可以通过将数据通过插值法直接在{{ }}中写表达式实现例如{{province + '-' + city}}，但是在vue中希望模板视图中尽量的简单，所以不推荐，但是这样的写法并不会报错。其次通过methods下写方法页可以实现，定义好方法后直接在视图中{{方法名()}}也可以。但是由于计算属性的缓存机制，所以优先使用计算属性方法。
如下图修改省和市可以通过计算属性得到位置。修改省和市的时候同时位置信息也发生改变
由于计算属性有缓存机制，所以在已有属性不发生改变的情况下，同时使用多次计算属性也只会调用一次get方法。
除非我们通过input框去修改了省和市的数据，使数据发生改变时才会再次调用get方法去更新计算属性。
通常计算属性并不会去修改，我们只是为了展示一些计算后的属性去供人查看。所以计算属性有一个简洁的写法，只具备get方法，具体代码如下：
计算属性与监视属性的区别：
- computed: 是vue的计算属性, 是通过data中已有的属性计算得来的, 理解为是对data数据的加工处理, 计算属性最终会出现在VM上可以直接读取
- watch: 是vue的监听属性, 和computed一样都是一个对象, 当被监视的属性变化时, 回调函数自动调用, 进行相关操作(监视的属性必须存在，才能进行监视), 监听复杂类型数据(对象,数组)变化时需要加上deep属性开启深度监听
- 两者区别:
- computed能完成的功能，watch都可以完成
- watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作, computed不支持异步，有异步操作时无法监听数据变化
- computed支持缓存，当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值；watch不支持缓存，当对应属性发生变化的时候，响应执行。
- computed第一次加载时就监听；watch默认第一次加载时不监听(可以通过设置immediate参数为true实现第一次加载时监听)。
