vue Watch和Computed的使用總結

Posted on by

01. 監聽器watch

（1）作用

  • watch：用於監聽data中的數據變化，隻在被監聽的屬性值發生變化時執行
export default {
    data() {
        return {
            number: 1
        }
    },
    watch:{
        // 普通監聽方法，這裡表示監聽data中的 number屬性
        // 第一個參數表示改變後的新值，第二個參數表示改變前的舊值
        number(newVal,oldVal){
            console.log(newVal);
            console.log(oldVal);
        }
    }
}

（2）屬性和方法

  • immediate：表示在組件創建後，立即監聽屬性，在最初綁定值的時候，設置為：immediate: true
  • handler：監聽對象的時候使用，發生變化時，執行handler中的方法~
  • deep：表示深度監聽對象、數組內部的屬性的變化，設置為：deep: true
export default {
    data(){
        return {
            number: 1
        }
    },
    watch: {
        // 監聽 number屬性
        number: {
			handler(newVal, oldVal){
                
            },
            immediate: true, // 立即監聽
        }
    }
}

（3）監聽對象

  • 可以監聽對象的直接賦值操作
    • 但不能監聽對象屬性的添加、修改、刪除
export default {
    data() {
        return {
            obj: {
                a: 1
            }
        }
    },
    watch: {
        obj: {
            handler(newVal){
                console.log('監聽到瞭', newVal)
            },
            immediate: true
        }
    },
    created(){
        // 無法監聽到，因為是對屬性進行的修改操作
        // 打印一次，且打印結果為修改後的值，
        this.obj.a = 2 

        // 可以監聽到，因為是直接對 對象進行的 賦值操作
        // 打印兩次（immediate立即監聽會打印一次，修改時打印一次）
        this.obj = { a: 2} 
    }
}

由於 Vue 會在初始化實例時，會對屬性執行 getter/setter 轉化過程

所以屬性必須在 data 對象上存在，才能讓 Vue 轉換它，這樣才能讓它是響應式的

因此，Vue 無法檢測到對象屬性的添加、刪除、修改等操作

默認情況下 handler 隻監聽對象內部屬性的引用的變化

因此，我們隻有進行賦值操作的時候，它才會監聽到

  • 可以直接監聽對象的某一個屬性值
    • 如果這個屬性是基本類型的值，就可以正常監聽
export default {
    watch: {
        'obj.a': {
            handler(newVal){
                console.log(newVal)
            }
        }
    },
    created(){
        // 以下兩個都可以監聽到 打印兩次
        this.obj.a = 2
        this.obj = { a:2 }
    }
}
  • 可以使用deep屬性進行深度監聽
    • 隻能監聽原有屬性的變化，不能監聽新增屬性
    • vue 無法監聽 this.$set 修改原有屬性的變化

這是因為，this.$set()就是相當於在data中對初始值進行改變

它可以觸發監聽，但變化體現不出來，即newVal === oldVal

export default {
    watch: {
        obj: {
            handler(newVal){
            	console.log(newVal)
            },
            deep: true,
            immediate: true
        }
    },
    created(){
        // 進行深度監聽後，直接修改屬性的變化也可以監聽到
        // 打印兩次(因為immediate)
        this.obj.a = 2
        
        // 無法監聽到 對象屬性的增加
        // 打印一次，且打印結果為添加瞭新增屬性的對象
        // 即，它隻會 因immediate而執行一次 ，且打印輸出 {a:1,b:2}
        this.obj.b = 2
        
        // 可以觸發監聽，但無法監聽到變化
        // 打印兩次，兩次值都是{a:2}，不能體現變化
        this.$set(this.obj, 'a', 2)
    }
}

（4）監聽數組

  • 可以監聽
    • 數組的直接賦值操作
    • 通過數組方法的添加、修改、刪除操作
    • 通過this.$set()方法進行的數組操作

數組方法如pop()、push()等，和this.$set(arr, index, newVal)方法

它們可以觸發監聽，但無法體現變化，即newVal === oldVal

  • 無法監聽
    • 無法監聽數組的非數組方法的添加、刪除、修改操作
    • 無法監聽直接通過索引值改變數組的變化
    • 無法監聽直接修改數組長度的變化
export default {
    data() {
        return {
            arr: [1]
        }
    },
    watch: {
        arr: {
            handler(newVal, oldVal) {
                console.log('新：', newVal)
                console.log('舊：', oldVal)
            },
            immediate: true
        }
    },
    created() {
        // 可以監聽到---直接整個數組賦值
        this.arr = [2]
        
        // 無法監聽到---索引賦值、長度修改
        this.arr[1] = 2
        this.arr[0] = 2
        this.arr.length = 2
        
        // 可以觸發監聽，但無法監聽到變化 => 即新、舊值都是一樣的
        this.arr.push(2)
        this.$set(this.arr, 0, 2)
    }
}

02. 計算屬性computed

（1）計算屬性的set方法

  • 計算屬性可以寫為一個 Object，而非 Function，隻是 Function 形式是我們默認使用它的 get 方法，當寫為 Object 時，我們還可以使用它的 set 方法
computed: {
  fullName: {
    get () {
      return `${this.firstName} ${this.lastName}`;
    },
    set (val) {
      const names = val.split(' ');
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    }
  }
}

當執行 this.fullName = ‘Aresn Liang’，computed 的 set 就會調用，firstName 和 lastName 就會被賦值為 Aresn 和 Liang

computed 可以依賴其它 computed，甚至是其它組件的 data

（2）區別

  • 計算屬性和監聽器
    • 計算屬性computed是：監聽依賴值的變化
      • 隻要依賴值不變，都會直接讀取緩存進行復用
      • 計算屬性不能響應異步操作中數據的變化
      • 需要人為調用
    • 監聽器watch是：監聽屬性值的變化
      • 隻要屬性值發生變化，都可以觸發一個回調函數
      • 監聽器可以響應異步操作中數據的變化
      • 自動觸發
  • 計算屬性和方法
    • methods 是一個方法，它可以接受參數，而 computed 不能
    • computed 是可以緩存的，methods 不會

（3）使用場景

  • 當一個屬性受多個屬性影響的時候就需要用到computed
  • 當一條數據影響多條數據的時候就需要用watch，如搜索數據

以上就是vue Watch和Computed的使用總結的詳細內容，更多關於vue Watch和Computed的使用的資料請關註WalkonNet其它相關文章！

推薦閱讀：