Vue3的watch和watchEffect

1. 监听ref类型数据
   可以监听一个属性，也可以监听多个属性（数组形式，同时newValue和oldValue返回的也是数组形式）

   <script>
   import { ref, watch } from 'vue';
   export default {
   	setup() {
   		let msg = ref('hello world');
   		// 监听一个ref属性
   		watch(msg, (newValue, oldValue) => {
   			console.log(newValue, oldValue);
   		}, {immediate: true});
   		
   		// 监听多个ref属性
   		let count = ref(0);
   		watch([msg, count], (newValue, oldValue) => {
   			console.log(newValue, oldValue); // newValue和oldValue是数组，与监听的属性数组相对应
   		}, {immediate: true});
   		return {
   			msg,
   			count
   		}
   	}
   }
   </script>
   

2. 监听reactive类型数据
   说明
   ① 监听reactive定义的响应式数据时，能监听到里面任意属性的变化，但是oldValue无效，与newValue同值，且强制开启了深度监视
   ② 监听reactive定义的响应式数据中的某一个属性时，指定监听对象时需要利用函数形式返回
   ③ 监听reactive定义的响应式数据中的某一个属性是对象或数组（引用数据类型）时，需要开启深度监视，否则监视的只是这个对象的地址

   <script>
   import { reactive, watch } from 'vue';
   export default {
   	let person = reactive({
   		name: 'wu',
   		age: 18,
   		job: {
   			city: 'tianjin'
   		},
   		hobby: ['eat', 'drink']
   	});
   	// 监听reactive直接定义的响应式数据，oldValue无效，与newValue同值，且强制开启了深度监听，deep： false不生效
   	watch(person, (newValue, oldValue) => {
   		console.log(newValue, oldValue);
   	}, {immediate: true, deep: false});
   	
   	// 监听reactive定义的响应式数据中的某个属性，需要通过函数形式返回
   	watch(() => person.name, (newValue, oldValue) => {
   		console.log(newValue, oldValue);
   	}, {immediate: true});
   	
   	// 监听reactive定义的响应式数据中的某个对象属性，不开启深度监视，只有job地址变化才会触发watch，开启深度监视，当内容任何数据发生变化时，都会触发watch
   	watch(() => person.job, (newValue, oldValue) => {
   		console.log(newValue, oldValue);
   	}, {immediate: true, deep: true});
   	return {
   		person
   	}
   }
   </script>
   

3. watchEffect
   说明：watch必须指定需要监听哪个对象，而watchEffect无需指定，函数内部用到了哪个属性，等这个属性变化时，watchEffect会自动调用

   <template>
   	<button @click="changeCount">改变countbutton>
   	<button @click="changeName">改变Namebutton>
   template>
   

   <script>
   import { ref, reactive, watchEffect } from 'vue';
   export default {
   	setup() {
   		let count = ref(0);
   		let person = reactive({
   			name: 'wu'
   		});
   		watchEffect(() => {
         		console.log(count.value);
   			console.log(person.name);
   			console.log('此处用到了count和person的name属性，count和name变化时，会自动调用此方法')
   		});
   		function changeCount() {
   			count.value++;
   		}
   		function changeName() {
   			person.name += '~';
   		}
   		return {
   			count,
   			person,
   			changeCount,
   			changeName
   		};
   	}
   }
   </script>