目錄01. 監(jiān)聽器watch（1）作用（2）屬性和方法（3）監(jiān)聽對象（4）監(jiān)聽數(shù)組02. 計算屬性computed（1）計算屬性的set方法（2）區(qū)別（3）使用場景01. 監(jiān)聽器watch（1）作用 watch：用于監(jiān)聽data中的數(shù)據(jù)變化，只在被監(jiān)聽的屬性值發(fā)生變化時執(zhí)行

export default { data() {return { number: 1} }, watch:{// 普通監(jiān)聽方法，這里表示監(jiān)聽data中的 number屬性// 第一個參數(shù)表示改變后的新值，第二個參數(shù)表示改變前的舊值number(newVal,oldVal){ console.log(newVal); console.log(oldVal);} }}（2）屬性和方法 immediate：表示在組件創(chuàng)建后，立即監(jiān)聽屬性，在最初綁定值的時候，設(shè)置為：immediate: true handler：監(jiān)聽對象的時候使用，發(fā)生變化時，執(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)聽到，因為是對屬性進行的修改操作// 打印一次，且打印結(jié)果為修改后的值，this.obj.a = 2 // 可以監(jiān)聽到，因為是直接對 對象進行的 賦值操作// 打印兩次（immediate立即監(jiān)聽會打印一次，修改時打印一次）this.obj = { a: 2} }}

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

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

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

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

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

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

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

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

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

export default { watch: {obj: { handler(newVal){ console.log(newVal) }, deep: true, immediate: true} }, created(){// 進行深度監(jiān)聽后，直接修改屬性的變化也可以監(jiān)聽到// 打印兩次(因為immediate)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()方法進行的數(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)聽到---直接整個數(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. 計算屬性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]; } }}

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

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

（2）區(qū)別 計算屬性和監(jiān)聽器 計算屬性computed是：監(jiān)聽依賴值的變化 只要依賴值不變，都會直接讀取緩存進行復用 計算屬性不能響應異步操作中數(shù)據(jù)的變化 需要人為調(diào)用監(jiān)聽器watch是：監(jiān)聽屬性值的變化 只要屬性值發(fā)生變化，都可以觸發(fā)一個回調(diào)函數(shù) 監(jiān)聽器可以響應異步操作中數(shù)據(jù)的變化 自動觸發(fā) 計算屬性和方法 methods 是一個方法，它可以接受參數(shù)，而 computed 不能computed 是可以緩存的，methods 不會（3）使用場景 當一個屬性受多個屬性影響的時候就需要用到computed 當一條數(shù)據(jù)影響多條數(shù)據(jù)的時候就需要用watch，如搜索數(shù)據(jù)

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