目錄01. 監(jiān)聽器watch（1）作用（2）屬性和方法（3）監(jiān)聽對(duì)象（4）監(jiān)聽數(shù)組02. 計(jì)算屬性computed（1）計(jì)算屬性的set方法（2）區(qū)別（3）使用場景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)聽對(duì)象的時(shí)候使用，發(fā)生變化時(shí)，執(zhí)行handler中的方法~ deep：表示深度監(jiān)聽對(duì)象、數(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)聽對(duì)象 可以監(jiān)聽對(duì)象的直接賦值操作 但不能監(jiān)聽對(duì)象屬性的添加、修改、刪除

export default { data() {return { obj: {a: 1 }} }, watch: {obj: { handler(newVal){console.log(’監(jiān)聽到了’, newVal) }, immediate: true} }, created(){// 無法監(jiān)聽到，因?yàn)槭菍?duì)屬性進(jìn)行的修改操作// 打印一次，且打印結(jié)果為修改后的值，this.obj.a = 2 // 可以監(jiān)聽到，因?yàn)槭侵苯訉?duì) 對(duì)象進(jìn)行的 賦值操作// 打印兩次（immediate立即監(jiān)聽會(huì)打印一次，修改時(shí)打印一次）this.obj = { a: 2} }}

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

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

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

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

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

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

export default { watch: {’obj.a’: { handler(newVal){console.log(newVal) }} }, created(){// 以下兩個(gè)都可以監(jiān)聽到 打印兩次this.obj.a = 2this.obj = { a:2 } }} 可以使用deep屬性進(jìn)行深度監(jiān)聽 只能監(jiān)聽原有屬性的變化，不能監(jiān)聽新增屬性vue 無法監(jiān)聽 this.$set 修改原有屬性的變化

這是因?yàn)椋瑃his.$set()就是相當(dāng)于在data中對(duì)初始值進(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)聽到 對(duì)象屬性的增加// 打印一次，且打印結(jié)果為添加了新增屬性的對(duì)象// 即，它只會(huì) 因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] = 2this.arr[0] = 2this.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 就會(huì)調(diào)用，firstName 和 lastName 就會(huì)被賦值為 Aresn 和 Liang

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

（2）區(qū)別 計(jì)算屬性和監(jiān)聽器 計(jì)算屬性computed是：監(jiān)聽依賴值的變化 只要依賴值不變，都會(huì)直接讀取緩存進(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ù)的變化 自動(dòng)觸發(fā) 計(jì)算屬性和方法 methods 是一個(gè)方法，它可以接受參數(shù)，而 computed 不能computed 是可以緩存的，methods 不會(huì)（3）使用場景 當(dāng)一個(gè)屬性受多個(gè)屬性影響的時(shí)候就需要用到computed 當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時(shí)候就需要用watch，如搜索數(shù)據(jù)

以上就是vue Watch和Computed的使用總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于vue Watch和Computed的使用的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！