Vue计算属性与监听属性

计算属性getter什么时候被调用？#

1. 初次读取时。
2. 所依赖的数据改变时。

计算属性写法：

 computed:{
            full:{
                get(){
                    return this.first+this.end;
                },
                set(value){

                }
            },
            //简写,只读不写时使用
            fullName(){
              return  this.first+this.end;
            }
        }

watch监听属性：#

基本用法：

<script>
    const vm = new Vue({
        data:{
            first:"张",
            end:"三"
        },
        computed:{
            //简写,只读不写时使用
            fullName(){
              return  this.first+this.end;
            }
        },
         watch:{
            fullName:{ //监听的属性
                handler(newValue,oldValue){
                    console.log("新值："+newValue+"旧值："+oldValue)
                }
            }
        }
    })
    vm.$mount(".app");
</script>

<script>
    const vm = new Vue({
        data:{
            first:"张",
            end:"三"
        },
        computed:{
            //简写,只读不写时使用
            fullName(){
              return  this.first+this.end;
            }
        },
    })
    vm.$mount(".app");
    vm.$watch('fullName',{
        handler(newValue,oldValue){
            console.log("新值："+newValue+"旧值："+oldValue)
        }
    })
</script>

深度监听：#

1. Vue中的watch默认不监听对象内部值得改变。
2. 配置deep:true可以监听对象内部值得改变。

备注：

1. Vue自身可以监听对象内部值得改变，但是Vue提供得watch默认不可以！
2. 使用watch时根据数据的具体结构，决定是否采用深度监听。

data:{
  obj:{
      name:"张三",
      age:21
  }  
},

watch:{
            obj:{
                immediate:true,//初始化时让handler调用一下
                deep:true,//深度监听obj
                handler(newValue,oldValue){
                    console.log("新值："+newValue+"旧值："+oldValue)
                }
            }
        }

watch简写：#

当没有配置immediate,deep等属性时可以使用简写。

watch:{
	obj(newValue,oldValue){
        
    }
}



vm.$watch('监听属性',function(newValue,oldValue){
    
})

computed和watch之间的区别：#

1. computed能完成的功能，watch都能完成。
2. watch能完成的功能，computed不一定能完成。例如：watch可以进行异步操作。

两个重要小原则：

1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2. 所有不被Vue所管理的函数（定时器回调函数、ajax回调函数等），最好使用箭头函数，这样this的指向才是vm或组件实例对象。