watch监听 ，监听顺序 vue

watch监听 ，监听顺序 vue

一、watch监听有2种写法：

1. 第一种是简写：

// 监听name变化
watch: {
	name(n) {
		console.log(n)
	}
}

2. 第二种：使用监听属性：mmediate和deep；

• immediate：immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行；
• deep其值是true或false；确认是否深入监听。deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，deep属性适合用在对象和数组，因为Vue 不能检测到对象属性的添加或删除。

watch: {
	// 监听数组的变化
	list: {
		handler(n) {
			// 执行方法
			console.log(n)
		},
		deep: true,
		immediate: true
	}
}

二、watch监听执行顺序

在项目中遇到会同时监听2个data变量，在这两个data变量监听事件中会执行同样的事件，但是不知道执行顺序，现在这里记录一下。比如：watch监听name和list，name监听写在list前面，那就是先执行name的监听事件，再执行list的监听事件，按照先后顺序执行。

watch: {
	name: {
		handler(n) {
			console.log("监听name")
			this.getList()
		},
		immediate: true
	},
	list: {
		handler(n) {
			console.log("监听list")
			this.getList()
		},
		deep: true,
		immediate: true
	}
}

输出结果截图：

我之前一直以为watch监听是无序的，只是用来监听data变量的，没想到会有执行顺序，但是在项目中遇到watch监听2个data变量会调用同样的方法事件，由于监听的先后顺序不一样，返回的结果和我一开始想的不一样，之后我想做一下这个watch监听执行顺序的demo，在此记录一下，以后方便查找。