vue中watch使用，并且监听对象属性值

vue中watch简单监听

1. 基于简单的变量监听

<template>
	<div>
		<p>{{success}}</p>
		<p>{{error}}</p>
	</div>
</template>
<script>
export default {
	data() {
    	return {
			sucess: '成功'，
			error: ''
		}
	},
	watch: {
		success(val) {
			this.error = val
		}
	}
}
</script>

上面的栗子就像v-model原理相差无二，通过监听success值得变化然后赋值给error，也可进行判断操作然后赋值

2. 对象属性值的监听

<template>
	<div>
		<p>{{success}}</p>
		<p>{{error}}</p>
	</div>
</template>
<script>
export default {
	data() {
    	return {
    	msg:{
    		sucess: '成功'，
    	},
		error: ''
		}
	},
	watch: {
		// 第一种
		'msg.success': function(val) {
			this.error = val
		}
		// 第二种
		msg:{
        	handler:function(val,oldval){
          		console.log(val.success)
        	},
        	deep:true//对象内部的属性监听，也叫深度监听
      	},
	}
}
</script>

第二种方法中handler和deep属性官方介绍是选项值，但是在这儿必须要写
因为在变量msg后面传了一个对象handler，函数执行的时候第一步会判断它是不是对象，如果是对象的话就拿他handler的参数作为监听处理，所以监听对象必须得这样写

补充：官方给出两种属性hendler和immediate
handler上面已经说过了，immediate是怎么用的呢，watch监听时有一个特点，当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true

3. 除此之外watch可配合computed

<template>
	<div>
		<p>{{success}}</p>
		<p>{{error}}</p>
	</div>
</template>
<script>
export default {
	data() {
    	return {
    	msg:{
    		sucess: '成功'，
    	},
		error: ''
		}
	},
	computed: {
    	newmsg() {
      		return this.msg.success
    	}
  	},
	watch: {
		newmsg: function(val) {
			this.error = val
		}
	}
}
</script>

这种方法也很nice，对于监听对象就很简单了