Vue3的watch和watchEffect

watch只能监听4种类型数据：ref、reactive、getter函数、上述三种组成的数组

注意：
① 监听ref定义的对象类型，监听的是对象地址变化，开启深度监视之后才可以监听到内部任意属性变化
② 监听reactive定义的对象类型，强制开启了深度监视（不可关掉）
③ 监听ref/reactive对象中的某个基本类型数据时，必须写成箭头函数形式返回
④ 监听ref/reactive对象中的某个引用类型数据时，不写箭头函数，监听的是内部所有属性变化；写成箭头函数监听的是地址，需开启深度监视才既能监听地址变化，又能监听内部所有属性变化

1. 可以监听一个属性，也可以监听多个属性（数组形式，同时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类型数据

   <script>
   import { reactive, watch } from 'vue';
   export default {
   	let person = reactive({
   		name: 'wu',
   		age: 18,
   		job: {
   			city: 'tianjin'
   		},
   		hobby: ['eat', 'drink']
   	});
   	// 监听reactive直接定义的响应式数据，因地址相同，所以oldValue与newValue同值，且强制开启了深度监听（不可关闭）
   	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">改变count</button>
   	<button @click="changeName">改变Name</button>
   </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>