Vue3学习之第四节：setup()中使用watch、watchEffect 函数

一、watch 监听

import { ref, watch, reactive } from 'vue'

export default {
	setup(){
		let str = ref('')
		let msg = ref('你好！')
		let person = reactive({
			name: '王五',
			age: 100,
			info: {
				a: {
					salary: 20
				}
			}
		})
		
		// 情况一：监听ref所定义的一个响应式数据（此时不用监视str.value，因为str.value是个基本数据类型，而str是个RefImpl实力对象）
		watch(str, (newValue,oldValue) => {
			console.log(newValue,oldValue,'输出')
		})
		
		// 情况二：监听ref所定义的多个响应式数据
		watch([str,msg], (newValue,oldValue) => {
			// 此时 newValue,oldValue 是个数组
			console.log(newValue,oldValue,'输出')
		})
		
		/*
			情况三：监听reactive所定义的一个响应式数据的全部属性
				注意1:此处无法正确获取oldValue(后续是否获取到要看官方更新)
				注意2:强制开启了深度监视（deep配置无效）
		*/
		watch(person, (newValue,oldValue) => {
			console.log(newValue,oldValue,'person变化了')
		})

		// 情况四：监听reactive所定义的一个响应式数据的某个属性
		watch(() => person.age, (newValue,oldValue) => {
			console.log(newValue,oldValue,'person的age变化了')
		})
		
		// 情况五：监听reactive所定义的一个响应式数据的某些属性
		watch([() => person.age,() => person.name], (newValue,oldValue) => {
			console.log(newValue,oldValue,'person的age或name变化了')
		})
		
		// 特殊情况
		watch(() => person.info, (newValue,oldValue) => {
			console.log(newValue,oldValue,'变化了')
		},{ deep: true })
		注意⚠️⚠️：此处开启深度监听和情况三的区别：
			   此处由于监视的是reactive中定义的对象中的某个属性，所以deep配置有效。
		
		immediate: true 可设置立即监听
		
		return {
			str,
			msg
		}
	}
}

二、watchEffect 函数

    watch的套路是：既要指明监视的属性，也要指明监视的回调。

    watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，就监视哪个属性。

    watchEffect有点像computed：
        但computed注重的是计算出来的值（回调函数的返回值），所以必须要写返回值。
        而watchEffect注重的是过程（回调函数的函数体），所以不用写返回值。

 // watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调
 watchEffect(() => {
	const x1 = sum.value
 	const x1 = person.age
 	console.log('watchEffect回调执行了')
 })