vue3 watch小知识

监听简单单个数据变化

const con = ref(0)
const change=()=>{
    con.value++
}

watch(con,(newvalue,oldvalue)=>{
    console.log("监听到数据变化了")
})

监听简单多个数据变化

const con = ref(0)
const con1 = ref('aa')
const change=()=>{
    con.value++
}

watch([con,con1],([newcon,oldcon],[newcon1,oldcon1])=>{
    console.log("监听到数据变化了",[newcon,oldcon],[newcon1,oldcon1])
})

监听复杂数据变化

const con = ref({count:0})

const change=()=>{
    con.value.count++
}

watch(con,()=>{
    console.log("监听到数据变化了",[newcon,oldcon])
},
{
deep:true------会监听全部数据，有性能损耗
}
)

精确监听复杂数据变化

const con = ref({name:0,age:18})

const change=()=>{
    con.value.age++
}

watch(
()=>con.value.age,
()=>{console.log('数据变化了')}
)

watchEffect

//watchEffect不需要明确指出监视的数据，函数中用到了那些属性，就监视哪些属性
watchEffect(()=>{
})