vue Watch和Computed的使用總結

阿新 • • 發佈：2021-05-23

01. 監聽器watch

（1）作用

watch：用於監聽data中的資料變化，只在被監聽的屬性值發生變化時執行

export defahttp://www.cppcns.comult {
    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 

        /igDlfY 
/ 可以監聽到，因為是直接對 物件進行的 賦值操作
        // 列印兩次（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.$swww.cppcns.comet 修改原有屬性的變化

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

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

export default {
    watch: {
        obj: {
            handler(newVal){
            	console.log(newVal)
            },deep: 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)
            },created() {
        // 可以監聽到---直接整個陣列賦值
        this.arr = [2]
        
        // 無法監聽到---索引賦值、長度修改
        this.arr[1] = 2
        this.arr[0] = 2
        this.arr.length = 2
        
        // 可以觸發監聽，但無法監聽到變化 => 即新、舊值都是一樣的
        this.arr.push(2)
        this.$set(this.arr,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 不會