Vue中的计算属性computed和监听器watch

1.计算属性computed

• 本质还是一种属性，只不过这个属性需要经过一些运算得到
• 虽然是一个属性，但是定义的时候定义的是一个function，这个function必须返回一个值，这个值就是属性的值
• 我们这虽然定义的是一个function但是我们使用的时候不加()
• 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。使用计算属性会帮我们做缓存
• 与data等同级

computed: {
                fullName() {
                    console.log('计算属性改变了', Date.now());
                    return this.firstName + this.endName
                }
            }

2.监听器watch

1. watch监听路由变化
   可以实现监听非界面属性的改变事件，比如说路由的改变

 watch: {
                // 每次路由跳转都会对应一个整个$route对象就会发生改变
                $route: function (newVal, oldVal) {
                    console.log('新路由地址：' + newVal.path);
                    console.log('旧路由地址：' + oldVal.path);

2. 深度监听
   当我们监听对象的时候，对象属性值的变化，不会修改对象的引用，vue就认为这个对象没有该改变。
   使用对象深度监听可以解决这个问题
   之前监听后面跟一个函数，这里跟的是一个对象，这个对象有下面两个属性

• handler对象改变后会执行的方法
• deep设置成true就可以进行深度监听，也就是对象属性改变也会触发这个方法

 watch:{
                obj:{
                    handler:function(newVal,oldVal){
                        console.log(newVal.name)
                    },
                    // 启用了深度监听，对象属性值的改变也会触发这个函数
                    deep:true
                }
            }

3.method、computed和watch的区别

• computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；
• methods方法表示一个具体的操作，主要书写业务逻辑；
• watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体