watch監聽

1.watch監聽普通變數

<div id="app">
			<input type="text" v-model='name' />
		
		</div>

<script>
		new Vue({
				el:'#app',
				data:{
					name:'233',
				},
				watch:{
					name(newValue,oldValue){
						console.log(newValue)
/*寫一些函式呼叫方法，比如分頁*/
					},	
				}
			})
			  
		</script>

然後在控制檯就可以看見輸入值得變化，在這裡經常使用到的是，監聽分頁的點選然後進行分頁請求資料。

2.物件的監聽，物件的監聽需要開啟深度監聽deep:true

<div id="app">
			<input type="text" v-model=obj.age />
		</div>

<script>
		new Vue({
				el:'#app',
				data:{
					obj:{
						age:'12',
						sex:'男'
					}
				},
				watch:{
				'obj.age':{/*監聽age的變化*/
						handler(newValue,oldValue){
							console.log(newValue)
						}
						
					},
                 deep:true
				}
			})
			  
		</script>

在這裡注意如果監聽的是物件的某個屬性需要在監聽時候加上‘ ’（例如文中的‘obj.age’）