Vue中的侦听器watch

1. 侦听器：侦听属性或计算属性值的变化，可以做异步操作，比如setTimeout()。

2. 实现侦听器的两种格式

   ① 利用watch配置项

   new Vue({
   	el: '#root',
   	data: function () {
   		return {
   			count: 1
   		}
   	},
   	watch: {
   		count: {  // 侦听count属性
   			handler(newValue, oldValue) {
   				console.log(`新值：${newValue}，旧值：${oldValue}`);
   			}
   		}
   	}
   });
   

   ② $watch()

   const vm = new Vue({
   	el: '#root',
   	data: function () {
   		return {
   			count: 1
   		}
   	}
   });
   vm.$watch('count', {  // 第一个参数为侦听的属性，第二个参数为配置项
   	handler(newValue, oldValue) {
   		console.log(`新值：${newValue}，旧值：${oldValue}`);
   	}
   });
   

3. watch中的配置项
   ① immediate：立即，默认是false，如果为true，则在页面初始化时就触发一次handler方法
   ② deep：深度侦听，能够侦听引用数据类型内部所有属性的变化，不只局限于侦听该属性地址的变化

   new Vue({
   	el: '#root',
   	data: function () {
   		return {
   			count: 1,
   			person: {
   				name: 'wuwu',
   				age: 18
   			}
   		}
   	},
   	watch: {
   		count: {
   			immediate: true,  // 页面初始化时，就调用一次侦听count属性的handler方法，newValue为1，oldValue为undefined
   			handler(newValue, oldValue) {
   				console.log(`新值：${newValue}，旧值：${oldValue}`);
   			}
   		}.
   		'person.name': { // 这样写表示侦听person中的name属性变化，效果与侦听count一致，因为它们都是基本数据类型
   			handler(newValue, oldValue) {
   				console.log(`新值：${newValue}，旧值：${oldValue}`);
   			}
   		},
   		person:{   // 这样写表示侦听person这个引用数据类型地址的变化，只有地址变化才会触发handler方法
   			handler(newValue, oldValue) {
   				console.log(`新值：${newValue}，旧值：${oldValue}`);
   			}
   		},
   		person: {  // 添加配置项deep:true表示深度侦听person中所有属性的变化，某一个属性发生变化都会触发handler方法
   			deep: true, 
   			handler(newValue, oldValue) {
   				console.log(`新值：${newValue}，旧值：${oldValue}`);
   			}
   		}
   	}
   });
   

4. 简写格式
   上述代码都是按照完整格式编写的，如果要简写，需要满足的条件就是没有配置项，如果有需求加immediate、deep等配置项，不能简写！！！

   new Vue({
   	el: '#root',
   	data: function () {
   		return {
   			count: 1,
   		}
   	},
   	watch: {
   		count(newValue. oldValue) {   // 直接写成函数形式，与计算属性类似
   			console.log(`新值：${newValue}，旧值：${oldValue}`);
   		}
   	}
   });