Vue2与Vue3中的watch使用

Vue2：

<template>
    <input type="text" v-model="age">
</template>

<script>
	export default {
		data(){
			return {
				age: 18,
				sex: {
					male: '1'
				}
			}
		},
		watch: {
			// 完整写法
			age: {
				immediate: true, // 进入页面立即监听
		      	deep: true, // 深度监听，监听sex下的值变化可使用deep
		      	handler(newAge, oldAge) {
		        	console.log('age值变化了', newAge, oldAge);
		      	}
			}
			// 简写
			age(newAge, oldAge) {
	        	console.log('age值变化了', newAge, oldAge);
		    }
		    // 字符串式深度
		    "sex.male": {
				handle(newmale, oldMale) {
					console.log(newMale, oldMale)
				}
			}
		}
	}
</script>

Vue3：

<template>
    <input type="text" v-model="msg">
    <input type="text" v-model="msg2">
    <input type="text" v-model="val.sex.male">
</template>

<script>
import { ref, reactive, watch } from 'vue'
const msg = ref(666)
const msg2 = ref(777)
// 监听一个ref值
watch(msg, (newMsg, oldMsg) => {
	console.log(newMsg, oldMsg)
})
// 监听多个ref值,并进入页面即执行监听
watch([msg, msg2], (newMsg, oldMsg) => {
	console.log(newMsg, oldMsg)
}, {immediate: true})

const val = reactive({
	name: 'zs',
	age: 18,
	sex: {
		male: 1,
		female: 0
	}
})
// 直接监听val值，会出现old值与new值相同的情形，即使写了深度监听也没有作用
watch(()=>val, (newMsg, oldMsg) => {
        console.log(‘old值与new值相同’,newMsg, oldMsg)
},{deep: true})
// 监听一个reactive值
watch(()=>val.name, (newMsg, oldMsg) => {
        console.log(newMsg, oldMsg)
},{deep: true, immediate: true})
// 监听多个reactive值
watch([()=>val.name, ()=>val.age], (newMsg, oldMsg) => {
        console.log(newMsg, oldMsg)
},{deep: true, immediate: true})
// 监听一个reactive所定义的对象中的某个属性
watch(()=>val.sex, (newMsg, oldMsg) => {
        console.log(newMsg, oldMsg)
},{deep: true, immediate: true})
</script>