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、总结

        本文介绍了计算属性和监听属性的使用，在此需要特别注意的是计算属性一定要加返回值。