vue3 watch用法

1. 监听基本类型数据

const num= ref(9)
watch(num,(newValue,oldValue)=>{
     console.log('watch innier', newValue)
}
)

2. 监听复杂类型的数据

const list= reactive({
	name: '张三',
	nickName: '三儿',
	soulmate: {
		name: '李四',
		nickName: '四儿'
	}
})

• 监听整个对象

1.方法一

//对象的子属性、孙属性里面任何一个属性改变都会触发
watch(list,(newValue,oldValue)=>{
     console.log('watch innier', newValue)
})

2.方法二

//注意这里是箭头函数，加了deep为true，对象里的子属性孙属性都会监听到
watch(()=>list,(newValue,oldValue)=>{
     console.log('watch innier', newValue)
},{deep: true},
//添加immediate，会让监听立即执行
{immediate:true}
)

• 监听对象里面的某一个属性

//注意这里要用前头函数，只有list里面的name属性变化才能触发该方法
watch(()=>list.name,(newValue,oldValue)=>{
     console.log('watch innier', newValue)
})

• 只监听对象的子属性

//只有对象的子属性变化，才能触发该方法，对象的孙属性变化不会触发该方法
watch(()=>({...list}),(newValue,oldValue)=>{
     console.log('watch innier', newValue)
})

3. 组合监听

const num= ref(9)
const list= reactive({
	name: '张三',
	nickName: '三儿',
	soulmate: {
		name: '李四',
		nickName: '四儿'
	}
})
//想要监听num和list里面的name
//注意第一个参数是数组，第二个箭头函数的参数也是数组
watch([()=>list.name,num],([newName,newNum],[oldName,oldNum])=>{
    console.log('watch innier: name', newName)
    console.log('watch innier: num', newNum)
})