我们都知道在Vue构造函数的参数对象中有一个【data】属性，该属性值是一个对象，该对象是对数据的代理，是一个键值对并且时刻与页面表现是一致的，但是这里面只能是简单的键值对，不能拥有业务逻辑，并且由于【data】中的属性属于同一个生命周期，所以如果我们需要某一个属性是依赖于另外一个属性时，在【data】中是做不到的，于是Vue为我们提供了【计算属性】
一 computed计算属性：
在构造函数的参数对象中有一个【computed】属性，该属性就是用于定义计算属性的，该对象中的【键】也就是我们的计算属性，与【data】不同的是，计算属性的键值是一个【拥有返回值的函数】，该函数中可以访问到【data】中的所有属性。
<div id="app">
firstName:<input v-model="firstName"/>
lastName:<input v-model="lastName"><br/>
fullName:<input :value="fullName"/><br/>
<br/>
{{xxx}}
</div>
var vm = new Vue({
el:"#app",
data:{
firstName:'Jim',
lastName:'Green',
xxx:'666'
},
computed:{
fullName(){
console.log("------------fullName------------")
return this.firstName + " " + this.lastName
}
}
})
【注意！！】计算属性虽然是一个方法，但是在Vue内部会被翻译成一个属性，我们可以使用实例【vm.fullName】访问到数据的。
1.1 计算属性的特点
计算属性也是用来存储数据，但具有以下几个特点：
① 数据可以进行业务逻辑处理操作
② 对计算属性中的数据进行监视
③ 计算属性是基于依赖进行缓存的
上面代码就是对与这两个最好的展现，第一：我们存储的数据是fullname它的值是通过firstName与lastName字符串拼接后得到的（这里就进行了逻辑业务处理），第二： 一旦firstName与lastName发生改变，那么fullname也会跟着改变。
1.2 计算属性使用时的注意事项
注意：
1、不管是计算属性还是watch都是和data、methods、el同级的
2、Vue实例中，处理el之外，基本上都是对象
3、计算属性，必须要有返回值
4、计算属性中的函数，调用的地方
1、初次渲染的时候，会执行
2、函数内部依赖的Model值发生变化，就会执行
1.3 计算属性的get与set
计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，如果需要set，要自己添加。
<div id="app">
{{num}}----{{addZero}}
<br>
<button type="button" @click="change(5)">点击改变num</button>
</div>
new Vue({
el: '#app',
data: {
num: 8
},
methods: {
change(newNumber) {
this.addZero = newNumber;
}
},
computed: {
addZero: {
get() {
return this.num > 10 ? this.num : '0' + this.num;
},
set(newNum) {
this.num = newNum
}
}
}
})
上面的代码含义是：
1）当我们没有点击按钮的时候，此时num值是8，程序进入get函数里面，那么addzero的值是‘08’
2）当我们点击了按钮，此时 addzero的值变为5，那么程序进入set函数里面，set函数的形参newNum的值就是5，在函数里num的值变为5
二 methods方法
对于上面的代码，其实方法也是可以实现的。
<div id="app">
firstName:<input v-model="firstName"/>
lastName:<input v-model="lastName"><br/>
// 这里将单向绑定一个方法fullName()
fullName:<input :value="fullName()"/><br/>
<br/>
{{xxx}}
</div>
var vm = new Vue({
el:"#app",
data:{
firstName:'Jim',
lastName:'Green',
xxx:'666'
},
//在这里声明这个方法
methods:{
fullName(){
console.log("------------fullName------------")
return this.firstName + " " + this.lastName
}
}
})
这里将计算属性变成方法也可以实现功能，但是方法与计算属性之间的区别是什么呢？
将计算属性的get函数定义为一个方法也可以实现和计算属性类似的功能。那么二者之间有什么区别？
区别一：计算属性是基于它的依赖进行实时更新的，方法则是调用才更新
区别二：计算属性是有缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行。操作一个没有依赖项的值也是如此。
| 计算属性computed | 方法methods |
|---|---|
| 有缓存，被迫执行 | 没有缓存，主动触发 |
总结： 从区别里面我们发现，计算属性是基于它的依赖进行实时更新的，那么性能开销小。而方法只要其他数据发生变化，触发重新渲染时，调用方法将总会再次执行函数，性能开销比较大。
三 watch 侦听属性
为什么要用侦听属性呢，官方的原文是：
“虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。”
<div id="app">
firstName:<input v-model="firstName"/>
lastName:<input v-model="lastName"><br/>
fullName:<input :value="fullName"/>
</div>
//js
var vm = new Vue({
el:"#app",
data:{
firstName:'Jim',
lastName:'Green',
fullName:'Jim Green'
},
watch:{
//newValue 新值 oldValue 老值
firstName:function(newValue,oldValue){
// console.log(newValue,oldValue)
this.fullName = newValue + " " + this.lastName
},
lastName(newValue,oldValue){
this.fullName = this.firstName + " " + newValue
}
}
})
这里应该注意的是，由于监听属性是不能储存数据的而是监听，所以数据必须在Vue实例对象的【data】属性中声明，不声明会报错；而计算属性是不用声明的，因为计算属性就是用来存储数据的，如果在【data】中声明会报错的。
3.1 侦听属性与计算属性的区别
相同点： 都可以它的依赖进行实时更新的
不同点：
1. 当一个属性需要依赖多个【data】中的属性时，建议使用计算属性
2. 执行异步操作或开销较大的操作用Watch
| computed(计算属性) | watch(侦听属性) |
|---|---|
| 计算属性可以同时监控多个data | watch只能一个一个监控data |
如果我们不是对属性进行操作，只是单纯的依据【data】中的某个值变化后做一些【非属性操作】时或者是在数据变化响应时，【执行异步操作或开销较大的操作】（比如：将变化后的值存入数据库，而不是改变其他属性）就使用Watch。
参考文献：
【1】 简阳幕宾《vue学习笔记2》
https://segmentfault.com/a/1190000011632375#articleHeader2