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

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

        本人是一个从小白自学计算机技术，对前端、运维、后端、各种中间件技术、大数据等有一定的学习心得，想获取自学总结资料（pdf版本）或者希望共同学习，关注微信公众号：it自学社团。后台回复相应技术名称/技术点即可获得。（本人学习宗旨：学会了就要免费分享）