watch 中的 immediate 和 deep 的差別

watch 的使用

首先 watch 是一個對象，一定要當成對象來說使用。對象就有鍵和值。

鍵：就是你監聽的東西，比如：$route（監聽路由），或者data 中的某個變量。

值：可以是函數或者函數名。如果是函數，則監聽變化時，需要執行的函數，這個函數有兩個參數，一個是變化後的值，一個是變化前的值，而如果是函數名，則需要用單引号來包裹。

當然值是包括選項的對象。

更多詳情，請參考案例：vue 從某個頁面進入到目前路由時，滾動浏覽器視圖到特定内容的可視區域。

handler 回調函數：監聽到變化是，應執行的函數；

deep：其值為 true/false，确認是否深度監聽（深度監聽可以監聽對象屬性和數組的變化）；

immediate：其值為 true/false，确認是否以目前的初始值執行 handler 函數。

immediate 設為 true 後，則監聽的這個屬性會立即輸出，也就是說一重新整理頁面就會在控制台輸出，當然此時頁面上的資料我們還沒來得及手動讓其發生變化，是以在控制台輸出的newValue為我們在代碼中預設設定的值，oldValue輸出為“undefined”。

搜尋框搜尋

現在的思路是定義一個searchValue，searchValue綁定輸入框，然後watch searchValue，調用getList()方法（當然也有其他好的想法）

watch:{
	serachValue(){
		this.getList()
		//getList裡面通過searchValue去搜尋資料庫
	}
}
//這個方法按上面的思路是肯定有這個的
           

而在頁面生成完成後需要調用getList()擷取全部資料

created():{
	this.getList();
}
           

整個頁面的搜尋部分代碼

export default {
	data(){
		return {
			sarchValue:""
		}
	},
	created():{
		this.getList();
	},
	methods:{
		getList(){
			server.getList({
				serachValue:this.searchValue
			})
		}
	},
	watch:{
		serachValue(){
			this.getList()
			//getList裡面通過searchValue去搜尋資料庫
		}
	}
}
           

現在我們如果使用了immediate後應該是這樣寫的呢，現在我們搬出immediate：true的定義初始化立即執行，現在這裡我們可以了解：data裡面定義了searchValue後就立即執行handle

我們可以把watch改改

watch:{
		serachValue:{
			//使用watch值是對象的第三種情況
			handler:"getList"
			//getList裡面通過searchValue去搜尋資料庫
			immediate:true
		}
	}
           

• 初始化立即執行，這樣我們就可以在created中去掉this.getList()了

export default {
	data(){
		return {
			sarchValue:""
		}
	},
	created():{
	},
	methods:{
		getList(){
			server.getList({
				serachValue:this.searchValue
			})
		}
	},
	watch:{
		serachValue:{
			//使用watch值是對象的第三種情況
			handler:"getList"
			//getList裡面通過searchValue去搜尋資料庫
			immediate:true
		}
	}
}
           

這樣在data中定了searchValue="";就直接調用getList(),而且sarchValue=""查找所有

這個例子隻是為空說明immediate的使用場景