vue watch詳解

watch的詳細用法：

watch:常規用法1

<input type="text" v-model="uerName"/> data(){ return { userName:'qdleader' } }, watch:{ userName(newName, oldName) { //... } } 

也可以寫一個監聽處理函數， 當每次監聽到 cityName 值發生改變時，執行函數。也可以在所監聽的數據后面直接加字符串形式的方法名：

watch: {
    userName: 'nameChange' } } 

這樣使用watch時有一個特點，就是當值第一次綁定的時候，不會執行監聽函數，只有值發生改變才會執行。如果我們需要在最初綁定值的時候也執行函數，則就需要用到immediate屬性。

因此當我門在子組件props首次獲取父組件傳過來的默認值時候，需要立即執行一次函數，這就引出第二種immediate

2.immediate和handler

data(){ return { userName:'qdleader' } }, watch: { userName:{ handler(newName, oldName) { //.. }, immediate:true,//immediate表示在watch中首次綁定的時候，是否執行handler，值為true則表示在watch中聲明的時候，就立即執行handler方法，值為false，則和一般使用watch一樣，在數據發生變化的時候才執行handler。 } } 

3.deep

還有很多時候，我們是要監聽對象某一屬性變化的，這時候就可以用deep

data(){ return { userInfo:{ id:1, name:'qdleader' } } }, watch:{ userInfo: { handler (newName, oldName) { //... }, deep:true, immediate:true } } 

這里有個不太好的地方。雖然設置了deep：true，我們可以堅挺到userInfo.name的變化。但是此時會給userinfo的所有屬性都加上這個監聽器，當對象屬性較多時，每個屬性值的變化都會執行handler。如果只需要監聽對象中的一個屬性值，則可以做以下優化：使用字符串的形式監聽對象屬性：

watch:{
	'userInfo.name': { handler (newName, oldName) { //... }, deep:true, immediate:true } } 

同學問了，監聽對象屬性還有沒有別的方法呢？

別着急呀！

監聽對象屬性computed也可以幫幫忙的。

computed: {
  getName: function() { return this.userInfo.name } }, watch:{ getName:{ handler:function(){ //do something } } } 

//延伸。。 監聽路由變化：

watch:{
      '$route.path':function(newVal,oldVal){ //console.log(newVal+"---"+oldVal); if(newVal === '/login'){ console.log('歡迎進入登錄頁面'); } else if(newVal === '/register'){ console.log('歡迎進入注冊頁面'); } } } 或者： watch:{ $route(to,from){ console.log(to.path); } }, 

即使道路坎坷不平,車輪也要前進;即使江河波濤洶涌,船只也航行。 最后，前端有興趣的可以關注下，也可以加群，一起成長。還有https://github.com/qdleader/qdleader[https://github.com/qdleader/qdleader]