怎么在vue中使用 Watch和Computed

本篇文章給大家分享的是有關怎么在vue中使用 Watch和Computed，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

以上就是怎么在vue中使用 Watch和Computed，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。