快捷導(dǎo)航

vue Watch和Computed的使用總結(jié)

更新時(shí)間：2021年05月20日 14:35:40 作者：Ruovan

本文主要介紹Vue.js中監(jiān)聽器和計(jì)算屬性的相關(guān)知識點(diǎn)，包括對普通屬性的監(jiān)聽、對對象的監(jiān)聽、對數(shù)組的監(jiān)聽，以及計(jì)算屬性的Set方法，計(jì)算屬性與監(jiān)聽器的區(qū)別等等

01. 監(jiān)聽器watch

（1）作用

watch：用于監(jiān)聽data中的數(shù)據(jù)變化，只在被監(jiān)聽的屬性值發(fā)生變化時(shí)執(zhí)行

export default {
    data() {
        return {
            number: 1
        }
    },
    watch:{
        // 普通監(jiān)聽方法，這里表示監(jiān)聽data中的 number屬性
        // 第一個(gè)參數(shù)表示改變后的新值，第二個(gè)參數(shù)表示改變前的舊值
        number(newVal,oldVal){
            console.log(newVal);
            console.log(oldVal);
        }
    }
}

（2）屬性和方法

immediate：表示在組件創(chuàng)建后，立即監(jiān)聽屬性，在最初綁定值的時(shí)候，設(shè)置為：immediate: true
handler：監(jiān)聽對象的時(shí)候使用，發(fā)生變化時(shí)，執(zhí)行handler中的方法~
deep：表示深度監(jiān)聽對象、數(shù)組內(nèi)部的屬性的變化，設(shè)置為：deep: true

export default {
    data(){
        return {
            number: 1
        }
    },
    watch: {
        // 監(jiān)聽 number屬性
        number: {
			handler(newVal, oldVal){
                
            },
            immediate: true, // 立即監(jiān)聽
        }
    }
}

（3）監(jiān)聽對象

可以監(jiān)聽對象的直接賦值操作
- 但不能監(jiān)聽對象屬性的添加、修改、刪除

export default {
    data() {
        return {
            obj: {
                a: 1
            }
        }
    },
    watch: {
        obj: {
            handler(newVal){
                console.log('監(jiān)聽到了', newVal)
            },
            immediate: true
        }
    },
    created(){
        // 無法監(jiān)聽到，因?yàn)槭菍傩赃M(jìn)行的修改操作
        // 打印一次，且打印結(jié)果為修改后的值，
        this.obj.a = 2 

        // 可以監(jiān)聽到，因?yàn)槭侵苯訉?對象進(jìn)行的 賦值操作
        // 打印兩次（immediate立即監(jiān)聽會打印一次，修改時(shí)打印一次）
        this.obj = { a: 2} 
    }
}

由于 Vue 會在初始化實(shí)例時(shí)，會對屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程

所以屬性必須在 data 對象上存在，才能讓 Vue 轉(zhuǎn)換它，這樣才能讓它是響應(yīng)式的

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

默認(rèn)情況下 handler 只監(jiān)聽對象內(nèi)部屬性的引用的變化

因此，我們只有進(jìn)行賦值操作的時(shí)候，它才會監(jiān)聽到

可以直接監(jiān)聽對象的某一個(gè)屬性值
- 如果這個(gè)屬性是基本類型的值，就可以正常監(jiān)聽

export default {
    watch: {
        'obj.a': {
            handler(newVal){
                console.log(newVal)
            }
        }
    },
    created(){
        // 以下兩個(gè)都可以監(jiān)聽到 打印兩次
        this.obj.a = 2
        this.obj = { a:2 }
    }
}

可以使用deep屬性進(jìn)行深度監(jiān)聽
- 只能監(jiān)聽原有屬性的變化，不能監(jiān)聽新增屬性
- vue 無法監(jiān)聽 this.$set 修改原有屬性的變化

這是因?yàn)?，this.$set()就是相當(dāng)于在data中對初始值進(jìn)行改變

它可以觸發(fā)監(jiān)聽，但變化體現(xiàn)不出來，即newVal === oldVal

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

（4）監(jiān)聽數(shù)組

可以監(jiān)聽
- 數(shù)組的直接賦值操作
- 通過數(shù)組方法的添加、修改、刪除操作
- 通過this.$set()方法進(jìn)行的數(shù)組操作

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

它們可以觸發(fā)監(jiān)聽，但無法體現(xiàn)變化，即newVal === oldVal

無法監(jiān)聽
- 無法監(jiān)聽數(shù)組的非數(shù)組方法的添加、刪除、修改操作
- 無法監(jiān)聽直接通過索引值改變數(shù)組的變化
- 無法監(jiān)聽直接修改數(shù)組長度的變化

export default {
    data() {
        return {
            arr: [1]
        }
    },
    watch: {
        arr: {
            handler(newVal, oldVal) {
                console.log('新：', newVal)
                console.log('舊：', oldVal)
            },
            immediate: true
        }
    },
    created() {
        // 可以監(jiān)聽到---直接整個(gè)數(shù)組賦值
        this.arr = [2]
        
        // 無法監(jiān)聽到---索引賦值、長度修改
        this.arr[1] = 2
        this.arr[0] = 2
        this.arr.length = 2
        
        // 可以觸發(fā)監(jiān)聽，但無法監(jiān)聽到變化 => 即新、舊值都是一樣的
        this.arr.push(2)
        this.$set(this.arr, 0, 2)
    }
}

02. 計(jì)算屬性computed

（1）計(jì)算屬性的set方法

計(jì)算屬性可以寫為一個(gè) Object，而非 Function，只是 Function 形式是我們默認(rèn)使用它的 get 方法，當(dāng)寫為 Object 時(shí)，我們還可以使用它的 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];
    }
  }
}

當(dāng)執(zhí)行 this.fullName = 'Aresn Liang'，computed 的 set 就會調(diào)用，firstName 和 lastName 就會被賦值為 Aresn 和 Liang

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

（2）區(qū)別

計(jì)算屬性和監(jiān)聽器
- 計(jì)算屬性computed是：監(jiān)聽依賴值的變化
  - 只要依賴值不變，都會直接讀取緩存進(jìn)行復(fù)用
  - 計(jì)算屬性不能響應(yīng)異步操作中數(shù)據(jù)的變化
  - 需要人為調(diào)用
- 監(jiān)聽器watch是：監(jiān)聽屬性值的變化
  - 只要屬性值發(fā)生變化，都可以觸發(fā)一個(gè)回調(diào)函數(shù)
  - 監(jiān)聽器可以響應(yīng)異步操作中數(shù)據(jù)的變化
  - 自動觸發(fā)
計(jì)算屬性和方法
- methods 是一個(gè)方法，它可以接受參數(shù)，而 computed 不能
- computed 是可以緩存的，methods 不會