Vue2中的计算属性（computed）和监听属性（watch）
1、说明
在Vue中我们经常会使用到多个参数计算出来的结果，在这种情况下我们可以定义参数和方法，将处理结果赋值给自定义参数，这种方式较为复杂，由此vue提供了计算属性方法。面对响应式页面，我们为了做到实时响应页面参数变化，可以使用vue中的watch属性。
2、计算属性
2.1、计算属性的定义方式-以方法方式
注：这种方式可以计算得到属性值，但是不能做到双向绑定。
// { [key: string]: Function | { get: Function, set: Function } }
export default{data(){return {}},computed:{// 方法名就是计算得到的参数名,使用 {{res}} 引用res(){}}
}2.2、计算属性的定义方式-使用set/get方式
注：可以读取和设置计算属性。
// { [key: string]: Function | { get: Function, set: Function } }
export default{data(){return {test: 2}},computed:{// 方法名就是计算得到的参数名,使用 {{res}} 引用res:{get(){return this.test + 1 },set(val){ // val是当前的值this.test = val + 1 }}}
}3、监听属性
3.1、浅监听（适用于基础类型的参数）
export default{data(){return {test: 2}},watch:{// test就是监听参数test(val, oldVal){// 此处监听test参数，新值和旧值}}
}3.2、深监听（适用于嵌套对象）
export default{data(){return {test: 2}},watch:{// test就是待监听参数test:{handler(val, oldVal) { /* ... */ },deep: true,immediate:true // 首次绑定也执行handler}}
}4、总结
本文介绍了计算属性和监听属性的使用，在此需要特别注意的是计算属性一定要加返回值。