vue中watch使用

watch

vue提供内部监听数据的变化， 分为深度监听（复杂数据类型） 和   简单监听（基本数据类型）。

以下是两种监听的写法

1.                                                           //简单监听

2. watch: { // 简单监听

3. 需要监听(newVal, oldVal) {

4. console.log(newVal, oldVal)

5. },

6.                                                          //深度监听

7. watch: {

8. '需要监听': {

9. handler(newVal, oldVal) {

10. console.log(newVal, oldVal)

11. },

12. deep: true,   //深度监听

13. immediate: true  //首次执行  

14. }}

接下来举例： 

1、监听一个简单数据类型

<template>
	<view></view>
</template>
<script>
	export default {
		data(){
			aa:null,
		},
		watch:{// 监听aa变量，有变化时执行
			aa(item1,item2){
				// item1为新值，item2为旧值  (oldValue,newValue)
			}
		}
	}
</script>

2、复杂数据监听

immediate 立即监听，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数

<template>
	<div></div>
</template>
<script>
	export default {
		data(){
			obj:{
				a:''
			},
		},
		watch:{            
			'obj.a'(item1,item2){  // 此处监听obj属性a值变量
				// item1为新值，item2为旧值
			},
			deep:true  //深度监听
		}
	}
</script>