目錄
1.computed計算屬性
1.1. computed的簡單例子
1.2.computed計算屬性的setter
2.watch偵聽器
2.1.簡單的watch偵聽
2.2.handler、immediate
2.3.監聽物件、陣列等（deep屬性）
2.4.監聽字串形式
2.5.監聽多個物件
之前做過關於資料不是定值，而是由其他資料計算而得來的頁面。
以前學藝不精，只會一些vue的簡單用法，所以之前都是用的methods方法，在輸入框上繫結input或者change事件，輸入資料時，修改結果的效果，來達到資料動態由其他資料計算得來的。
後來隨著vue的使用越來越多，對vue的其他知識點也開始逐漸多了解一點，這次做頁面上的計算，用了watch偵聽器，這裡簡單記錄一下自己在使用過程中遇到的問題和一些總結。
說到watch偵聽器，就順便記錄一下computed計算屬性。
之前就覺得computed計算屬性和直接在methods定義方法很類似，用computed可以實現的功能，直接定義方法好像基本都可以實現。
就像下面的簡單例子，做乙個加法運算，computed計算屬性和methods的方法都是一樣的。
var vm = new vue(,
computed:
},methods:
}})
計算屬性是基於它們的響應式依賴進行快取的。只在相關響應式依賴發生改變時它們才會重新求值。vue官方文件是這樣解釋的，計算屬性依賴於快取，只要你的值沒有變，計算屬性都會返回之前快取中的結果，適用一些需要進行大量計算的方法，如果不需要快取，還是methods方便些。
文件後面還講到了計算屬性可以提供乙個setter，就像下面這樣。
computed: ,
// setter
set: function(newval) }},
偵聽屬性watch，當你有一些資料需要隨著其它資料變動而變動時，就可以使用watch來監聽他們之間的變化。
這裡以上面的加法為例，使用watch做加法計算：
watch: ,
b: function(n, o),
},
不過這裡還有個問題，就是頁面剛載入時，因為沒有變化，所以不會執行。
這裡就引申出了另外的知識：handler方法和immediate屬性。
其實之前寫的watch方法預設就是handler，而當immediate屬性為true時，就會先執行handler方法。
watch: ,immediate: true
},b: ,immediate: true}},
在監聽物件時，會有乙個問題，修改物件的值的時候，不會觸發handler方法。
陣列則可以觸發，但是修改前的值和修改後的值是一樣的，這裡我暫時不清楚是什麼問題。
var vm = new vue(,
arr: [1, 2, 3, 4]
},watch:
},arr: }}
})
這時候就要用到deep屬性，設定deep屬性為true，***就會深入觀察，向下遍歷，效能開銷可能會比較大。
obj: ,
deep: true
},
這裡還有遇到乙個小問題，如果***新增乙個obj.z = obj.x + obj.y 的計算，這裡監聽了整個obj的變化，這樣計算完成後，因為obj.z的變化，還會再執行一次，所以我覺得如果監聽了整個物件的話，計算結果還是不要寫到這個物件裡面去，以免增加不必要的開銷。如果不想監聽obj中其他值，只想監聽obj.x的值的變化，可以寫成字串形式監聽。
有時乙個值可能是根據多個物件中的值，共同計算出來的，可以把這些改變的值放到乙個物件中去，也可以直接監聽多個物件。
watch: ,
deep: true
}},computed: = this;
return }},
以上就是我在寫關於***的經驗和遇到問題，在這裡簡單做下記錄，以後還可以多翻翻看，也希望對不懂的人有點小小的幫助。
VUE 監聽當前路由 偵聽器 watch
偵聽器 你可以利用偵聽器，響應資料的變化，例如路由，和頁面中data的值，可以在他們變化的時候寫相應的處理邏輯在偵聽器中。偵聽器的使用很簡單 watch 物件就是偵聽器，只有當偵聽的值改變了它才會執行。data watch 解析 在data中申明了msg變數為空字串，在watch偵聽器物件裡面建立了...
Vue3 0學習筆記 偵聽器Watch
偵聽器 watch watch 偵聽器 可以監聽 data中資料的變化 watch裡面的名字就是用資料的名字 可以接受兩個引數 current 變化後的值 prev 變化之前的值 watch message current,prev watch和computed的區別 computed在頁面渲染的同...
vue 偵聽器watch 之 深度監聽 deep
fullname firstname text v model person.firstname 結果 handler 方法就相當於普通偵聽器觸發的事件，從結果可以看到，元件初始化的時候，偵聽器並沒有handler方法 所以fullname是沒有值的 當修改以上 加上immediate true，元...