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’）