Vue Watch Computed

/** 計算屬性：computed;
  * 當數據的依賴項發生改變時，重新計算;
  */
data(){
    return {
        firstName: 'Li',
        lastName : 'Ys',
    }
}

computed:{
    //簡單版本
    fullName:function(){
        this.firstName + lastName;
    }
    //升級版本
    fullName:{
        get(){
            return this.firstName + ' ' + this.lastName
        },
        set(val){    //監視當前屬性值的變化，當屬性值發生變化時執行，更新相關的屬性數據
            //val就是fullName的最新屬性值
            const names = val.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
        }
    }
}

/**
  * 監聽屬性：watch;
  * 監聽data或prop中數據本身;
  */
data(){
    return {
        name:'Li',
        person:{
            name:'Li',
            age:15,
        }
    }
}

watch:{
    //簡單版本
    name:function(val){
        console.log(val);
    }
	
    //升級版
    person:{
        //newVal和oldVal引用的是同一個對象
        handler:function(newVal, oldVal){
            console.log(newVal.name);
        },
        deep:true,
    }
}

computed 和 方法調用 的比較：

•  方法調用通常用於完成 某一業務流程;
•  computed可以將某個複雜的計算過程從 template中抽離出來;
•  調用普通方法，每次都會重新計算，但computed是基於響應式依賴進行緩存的,可以理解爲 只有依賴項發生改變時，纔會重 新計算，並把結果進行緩存;

 

注意：

    不應該使用箭頭函數來定義 watcher 函數，因爲箭頭函數沒有 this，它的 this 會繼承它的父級函數，
    但是它的父級函數是 window，導致箭頭函數的 this 指向 window，而不是 Vue 實例。