Vue.js中的常见选项属性——监听器watch

1.监听器watch

监听器watch一般用来响应数据的变化，一般用于异步或者开销较大的操作。watch 中的属性 一定是data 中 已经存在的数据。

注意：不要使用箭头函数来定义watch函数

2.深度监听

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

下面通过一个案例来看一下监听器watch和深度监听。

HTML文件

        <div id="app">
			{{i}}
			<button @click="i++">+</button>
			<hr >
			{{stu}}
			<button @click="stu.age ++">年龄增加</button>
			<hr >
		</div>

使用watch来监听一下数据i

            new Vue({
				el: '#app',
				data: {
					i: 0,
					stu: {
						name: 'tom',
						age: 10
					},
				watch: {
					// 传入两个参数来查看改变前和改变后的值
					i(newVal,oldVal){
						console.log('监听器执行了...',newVal,oldVal)
					},
	        })

深度监听（写在watch选项属性内）

                stu: {
						handler(val){
							console.log('深度监听stu，',val)
						},
						deep: true //深度监听
					}

deep设置为true，表示进行深度监听。