watch使用

160 阅读1分钟

watch的用法

watch 									默认在监听属性未改变时不触发回调
三个属性:{
	handler    => handler(newData, oldData){}		当前要执行的函数
	immediate  => immediate: true 	  				将立即以表达式的当前值触发回调:
	deep 	   => deep = true 		  				为了发现对象内部值的变化
}

使用immediate = true,无论被监听属性是否改变,立即执行当前函数

函数声明

watch: {
	cityName: {							监听当前属性
  		handler (newName, oldName) {
    		console.log(newName)
    		console.log(oldName)
  		},
  		immediate: true
	}
}

字符串声明

watch: {								监听直接调用方法
		cityName: 'changeName'			changeName为方法名	
}

对象声明

watch: {						
		cityName: {						监听当前对象内的属性变化
  		handler (newName, oldName) {
    		console.log(newName)
    		console.log(oldName)
  		},
      	immediate: true,
  		deep: true
		}
}

watch: {
		'cityName.name': {				给对象某个特定属性加监听,减少性能损失
 		 handler (newName, oldName) {
    		console.log(newName)
    		console.log(oldName)
  		},
  		immediate: true,
  		deep: true
		}
}

数组声明

 watch: {
	cityName: [
  		'handle',						 直接调用方法
  		 function handle2 (val) {
    		console.log('第二次调用')
  		 },
  		 {
    		handler (val) {
      		console.log('第三次调用')
    	 	}
  		 }
	],
  	'cityName.f': function (val, oldval) {
  		console.log('第四次调用') 
    }
}
methods: {
	handle () {
  		console.log('第一个调用的')
	}
 }