目錄01. 監聽器watch（1）作用（2）屬性和方法（3）監聽對象（4）監聽數組02. 計算屬性computed（1）計算屬性的set方法（2）區別（3）使用場景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 = 2this.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] = 2this.arr[0] = 2this.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 Watch和Computed的使用總結的詳細內容，更多關于vue Watch和Computed的使用的資料請關注好吧啦網其它相關文章！