計算屬性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或元件例項物件。